移动端的布局用过媒体查询吗？写一个试试

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询示例</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f0f0f0;
      color: #333;
    }

    .container {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .item {
      padding: 10px;
      margin-bottom: 10px;
      background-color: #eee;
      border-radius: 4px;
    }

    /* 默认样式，大屏幕 */
    .item:nth-child(odd) {
      background-color: #ddd;
    }

    /* 平板样式 */
    @media (max-width: 768px) {
      .container {
        padding: 10px;
      }
      .item {
        margin-bottom: 5px;
      }
      .item:nth-child(even) { /* 平板下偶数项变色 */
        background-color: lightblue;
      }
    }

    /* 手机样式 */
    @media (max-width: 480px) {
      body {
        padding: 10px;
      }
      .container {
        border-radius: 0;
        box-shadow: none;
      }
      .item {
        background-color: #ccf; /* 手机下所有项变色 */
        margin-bottom: 0;
        padding: 5px;
        border-bottom: 1px solid #eee;
      }
       .item:last-child {
         border-bottom: none; /* 移除最后一项的下边框 */
       }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>媒体查询示例</h1>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

代码解释:

@media (max-width: 768px): 当屏幕宽度小于等于 768px 时，应用其中的样式，通常针对平板设备。
@media (max-width: 480px): 当屏幕宽度小于等于 480px 时，应用其中的样式，通常针对手机设备。
样式覆盖: 注意到不同媒体查询下的样式会覆盖默认样式或更宽屏幕的媒体查询样式。例如，在手机屏幕下，.item 的背景颜色会被设置为 #ccf，无论默认样式或平板样式是什么。
nth-child 选择器: 用于选择特定位置的子元素，例如 :nth-child(odd) 选择奇数项，:nth-child(even) 选择偶数项。