CSS3 多媒体查询（手把手讲解）

什么是 CSS3 多媒体查询？

在网页开发的早期，页面样式是“一刀切”的。无论用户用手机、平板还是台式机访问网站，看到的布局和字体大小都是一样的。这种做法在移动设备普及后显得非常不友好。于是，CSS3 引入了“多媒体查询”（Media Queries）机制，让样式可以根据设备特性动态调整。

你可以把 CSS3 多媒体查询想象成一个“智能开关”：它能感知当前设备的屏幕宽度、分辨率、方向甚至是否支持触控，然后决定该加载哪套样式。这就像你家的智能灯，白天自动调亮，晚上自动调暗，完全不用手动操作。

CSS3 多媒体查询的语法基于 @media 规则，它允许你为不同的设备条件设置独立的 CSS 样式。它的核心价值在于实现真正的响应式设计，让网站在不同设备上都保持良好的用户体验。

基础语法与核心结构

CSS3 多媒体查询的基本语法结构如下：

@media 查询条件 {
  /* 样式规则 */
  selector {
    property: value;
  }
}

其中，@media 是关键字，后面跟的是一个或多个媒体条件。这些条件可以是设备宽度、高度、分辨率、方向等。

举个简单的例子：

/* 当屏幕宽度小于 600px 时，应用以下样式 */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;  /* 手机上字体变小，更易阅读 */
    padding: 10px;    /* 减少边距，适应小屏 */
  }

  .container {
    width: 100%;      /* 容器占满整个屏幕 */
    display: block;   /* 从左右布局变为上下布局 */
  }
}

这里的 (max-width: 600px) 是一个媒体表达式，表示“最大宽度为 600 像素”。screen 表示目标设备类型是屏幕（而不是打印或语音设备）。

✅ 提示：and 是连接多个条件的关键字，多个条件必须同时满足才生效。例如：screen and (min-width: 768px) and (orientation: landscape) 表示“屏幕设备，最小宽度 768px，且为横屏”。

常用媒体特性详解

CSS3 多媒体查询支持多种媒体特性，以下是开发者最常使用的几个：

特性	说明	示例
`width`	设备视口的宽度	`(min-width: 768px)`
`height`	设备视口的高度	`(max-height: 1024px)`
`orientation`	屏幕方向（portrait / landscape）	`(orientation: portrait)`
`resolution`	设备分辨率（dpi 或 dppx）	`(min-resolution: 2dppx)`
`color`	设备颜色位数	`(min-color: 8)`
`aspect-ratio`	宽高比	`(min-aspect-ratio: 16/9)`

我们来具体看几个实用案例。

屏幕方向检测：横屏与竖屏自适应

当用户旋转手机时，网页应该能自动调整布局。通过 orientation 特性可以实现：

/* 竖屏时的样式 */
@media screen and (orientation: portrait) {
  .header {
    height: 80px;     /* 竖屏时头部更紧凑 */
    font-size: 18px;
  }

  .nav {
    flex-direction: column;  /* 菜单从横向变为纵向 */
  }
}

/* 横屏时的样式 */
@media screen and (orientation: landscape) {
  .header {
    height: 60px;     /* 横屏时头部更扁平 */
    font-size: 20px;
  }

  .nav {
    flex-direction: row;     /* 菜单横向排列 */
  }
}

这个设计让网页在旋转设备时，依然保持视觉协调性。

分辨率适配：高清屏（Retina）优化

高分辨率设备（如 Retina 屏）的像素密度更高，普通图片会模糊。通过 resolution 特性，我们可以为高分辨率设备加载高清图片。

/* 为高分辨率设备加载高清图片 */
@media screen and (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');  /* 使用 2x 图片 */
    background-size: contain;
  }

  .icon {
    background-image: url('icon@2x.png');
  }
}

注意：2dppx 表示每英寸 2 个像素，也就是 2 倍像素密度。这样，高清屏用户看到的图片更清晰，而普通屏幕仍使用原图，节省带宽。

响应式布局实战：从桌面到移动端

下面我们构建一个完整的响应式导航栏，用 CSS3 多媒体查询实现三端适配。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>响应式导航栏</title>
  <style>
    /* 基础样式：桌面端布局 */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #333;
      color: white;
      padding: 15px 30px;
      font-family: Arial, sans-serif;
    }

    .nav-links a {
      color: white;
      text-decoration: none;
      margin: 0 15px;
      font-size: 16px;
    }

    /* 桌面端：宽屏下显示完整菜单 */
    @media screen and (min-width: 992px) {
      .nav-links {
        display: flex;
      }
    }

    /* 平板端：中等屏幕，减少间距 */
    @media screen and (max-width: 991px) and (min-width: 768px) {
      .nav-links {
        display: flex;
        flex-wrap: wrap;
      }

      .nav-links a {
        margin: 5px 10px;
        font-size: 14px;
      }
    }

    /* 手机端：隐藏菜单，用汉堡菜单替代 */
    @media screen and (max-width: 767px) {
      .nav-links {
        display: none;  /* 默认隐藏 */
      }

      .hamburger {
        display: block;
        font-size: 24px;
        cursor: pointer;
        color: white;
        background: none;
        border: none;
      }

      /* 点击后显示菜单 */
      .nav-links.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: #444;
        padding: 10px 0;
      }

      .nav-links.active a {
        margin: 8px 15px;
        font-size: 16px;
      }
    }
  </style>
</head>
<body>

  <nav class="navbar">
    <div class="logo">MySite</div>
    <div class="nav-links">
      <a href="#">首页</a>
      <a href="#">产品</a>
      <a href="#">服务</a>
      <a href="#">联系</a>
    </div>
    <button class="hamburger">☰</button>
  </nav>

  <script>
    // 简单的 JS 逻辑：点击汉堡按钮切换菜单显示
    document.querySelector('.hamburger').addEventListener('click', function() {
      document.querySelector('.nav-links').classList.toggle('active');
    });
  </script>

</body>
</html>

这段代码实现了：

桌面端：完整导航栏水平排列；
平板端：菜单自动换行，字体略小；
手机端：隐藏菜单，用“☰”按钮触发展开。

这就是典型的“移动优先”响应式设计思想：先为小屏设计，再逐步增强。

高级技巧：组合查询与逻辑运算

CSS3 多媒体查询支持复杂的逻辑组合，让样式控制更精细。

使用 `not` 排除特定设备

/* 仅在非打印设备上显示背景图 */
@media not print {
  body {
    background-image: url('bg.jpg');
  }
}

使用 `only` 防止旧浏览器误解析

/* 只有支持媒体查询的设备才应用样式 */
@media only screen and (max-width: 600px) {
  .container {
    padding: 10px;
  }
}

only 是为了防止老式浏览器将媒体查询当作无效 CSS 而忽略。虽然现代浏览器已不严格依赖此写法，但作为规范写法仍推荐使用。

多条件组合：`and` 与 `or`（通过逗号）

/* 满足任一条件即可触发 */
@media screen and (max-width: 600px), print and (orientation: landscape) {
  .print-only {
    display: block;
  }
}

这里的逗号相当于“或”（OR）逻辑。表示“屏幕宽度小于 600px” 或 “打印且为横屏”时，应用该样式。

实践建议与最佳实践

优先使用移动优先策略：先写小屏样式，再用媒体查询逐步增强；
避免过度嵌套：不要在一个媒体查询中写太多样式，保持结构清晰；
使用断点命名：如 @media (min-width: 768px) 可命名为 tablet，便于维护；
测试真实设备：模拟器不能完全替代真实设备，建议在不同设备上测试；
性能注意：避免在媒体查询中使用复杂计算或频繁重排。

CSS3 多媒体查询不仅是响应式设计的核心，更是现代网页开发的基石。它让网页不再“死板”，而是能“感知环境”、“灵活应对”。掌握它，你就掌握了让网站在千变万化的设备中保持优雅的关键。

无论是初学者还是中级开发者，只要理解其原理并多加练习，就能轻松构建出适配各种设备的优秀网页。别再让页面在手机上“挤成一团”了，用 CSS3 多媒体查询，让每一块屏幕都成为你的舞台。