媒体查询

同一份 HTML，如何让它在手机、平板、电脑上呈现不同的排版？媒体查询（Media Query）就是答案：它根据设备宽度、屏幕方向等特征，条件式地应用某一段 CSS。配合 Viewport 与栅格，媒体查询是响应式布局的“开关”。

语法结构

@media 媒体类型 and (条件) {
    /* 条件成立时才应用的样式 */
}

• 媒体类型：all（全部）、screen（屏幕）、print（打印）等。
• and 连接多个条件；not 表示取反；only 用于兼容不支持媒体查询的旧浏览器。
• 括号中最常用的条件是 max-width 与 min-width。

按宽度分档：最常用写法

/* 手机优先：先写默认样式，再逐级放大 */
body { background: #f5f5f5; }

@media (min-width: 768px) {      /* 平板及以上 */
    body { background: #e3f2fd; }
}
@media (min-width: 1200px) {     /* 桌面 */
    body { background: #fff3e0; }
}

效果：默认浅灰；宽度达到 768px 变浅蓝；达到 1200px 变浅橙。拖动浏览器窗口即可实时看到切换。min-width 从小到大书写叫“移动优先”，反过来用 max-width 从大到小写叫“桌面优先”，团队统一一种即可。

一个完整小例子

导航菜单在手机上竖排整行，在宽屏展开成横向菜单：

.nav a { display: block; padding: 10px; } /* 手机：竖排，方便手指点按 */
@media (min-width: 768px) {
    .nav { display: flex; }                /* 宽屏：横向排列 */
}

<nav class="nav">
  <a href="#">首页</a><a href="#">教程</a><a href="#">关于</a>
</nav>

效果：窄屏每一项占满一行，宽屏自动收成一条横向菜单栏。

其他常用特性

除了宽度，媒体查询还能匹配屏幕方向与用户偏好：

@media (orientation: landscape) {   /* 横屏（宽 > 高） */
    .banner { height: 60vh; }
}
@media (prefers-color-scheme: dark) { /* 系统处于深色模式 */
    body { background: #222; color: #eee; }
}

配合 vh、vw 等单位，可做出横竖屏适配、自动跟随系统深色模式的页面。

小结

媒体查询让你“一套 HTML、多套 CSS”：用 min-width 做移动优先分档，需要时叠加横屏、深色模式等特性。它是响应式布局的开关，配合栅格与弹性图片视频，即可覆盖绝大多数设备。