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

<!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) 选择偶数项。

使用方法:

将代码保存为 HTML 文件，然后在不同尺寸的浏览器窗口或不同设备上打开，观察样式的变化。

关键点:

使用 max-width 可以针对不同屏幕尺寸应用不同的样式。
从小到大编写媒体查询，移动优先，可以避免很多样式冲突。
合理使用 nth-child 等选择器可以更灵活地控制样式。
记得设置 meta viewport 标签，确保页面在移动设备上正确显示。

这个例子展示了如何使用媒体查询来创建响应式布局，根据屏幕大小调整样式。你可以根据自己的需求修改样式和断点值。希望这个例子对你有帮助!

posted @ 2024-11-27 06:21 王铁柱6 阅读(9) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

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

公告