--- URL: "/zh-CN/blog/2025-10/css-media-queries.html" LLMS_URL: "/zh-CN/blog/2025-10/css-media-queries.md" lastUpdated: true commentabled: true recommended: true title: "CSS3 媒体查询（Media Queries）深度解析" description: "10 个实战适配案例" date: pageClass: "blog-page-class" cover: "/covers/css.svg" --- --- lastUpdated: true commentabled: true recommended: true title: CSS3 媒体查询（Media Queries）深度解析 description: 10 个实战适配案例 date: 2025-10-23 09:35:00 pageClass: blog-page-class cover: /covers/css.svg --- ## 引言：媒体查询的核心价值 ## 在移动互联网主导的时代，用户可能通过 *手机、平板、笔记本、桌面显示器* 等多种设备访问同一网页。CSS3 媒体查询（Media Queries）作为响应式 Web 设计（Responsive Web Design, RWD）的核心技术，允许开发者根据 *设备特性（如屏幕宽度、分辨率、方向）* 动态调整 CSS 样式，实现“一套代码适配多端”，无需为不同设备开发独立版本。 媒体查询的本质是：“*当满足某个设备条件时，应用对应的 CSS 规则*”。它解决了传统固定布局在多设备上“要么溢出、要么留白”的痛点，是现代前端开发的必备技能。 ## 一、媒体查询核心基础 ## 要灵活使用媒体查询，必须先掌握其语法结构、媒体类型、媒体特性与逻辑操作符。 ### 核心语法 ### 媒体查询通过 `@media` 规则定义，基本结构如下： ```css /* 语法格式 */ @media [媒体类型] and (媒体特性: 值) { /* 满足条件时应用的 CSS 样式 */ 选择器 { 样式属性: 值; } } /* 示例：屏幕宽度 ≥ 1200px 时，设置容器宽度为 1140px */ @media screen and (min-width: 1200px) { .container { width: 1140px; } } ``` 可独立引入外部样式表（适用于样式较多的场景）： ```html ``` ### 媒体类型（Media Type） ### 指定样式适用的设备类型，目前主流仅需关注 3 种（其他类型如 `tv`、`projection` 已极少使用）： | 媒体类型 | 说明 | 应用场景 | | :-----------: | :-----------: | :-----------: | | `all` | 所有设备（默认值，可省略） | 通用适配 | | `screen` | 彩色屏幕设备（手机、电脑、平板等） | 绝大多数 Web 场景 | | `print` | 打印机或打印预览模式 | 打印样式优化（如隐藏导航栏） | > 注意：`screen` 是最常用的类型，且可省略（如 `@media (min-width: 768px)` 等价于 `@media screen and (min-width: 768px)）`。 ### 媒体特性（Media Feature） ### 描述设备的具体属性，需用括号 `()` 包裹，常见特性如下（重点掌握前 4 个）： | 媒体特性 | 说明 | 单位 | 示例 | | :-----------: | :-----------: | :-----------: | :-----------: | | `width` | 视口（viewport）宽度 | px、em、rem | `(min-width: 768px)`（视口 ≥ 768px） | | `height` | 视口高度 | px、em、rem | `(max-height: 600px)`（视口 ≤ 600px） | | `device-width` | 设备物理屏幕宽度 | px | 不推荐：受设备像素比（DPR）影响，准确性低 | | `orientation` | 设备方向 | `portrait`（竖屏）、`landscape`（横屏） | `(orientation: landscape)` | | `prefers-color-scheme` | 用户系统颜色偏好 | `light`（浅色）、`dark`（深色） | `(prefers-color-scheme: dark)` | | `resolution` | 屏幕分辨率 | dpi、dpcm | `(min-resolution: 2dppx)`（Retina 屏） | > 关键区别：`width` 是“视口宽度”（浏览器显示内容的区域），`device-width` 是“设备物理屏幕宽度”。推荐使用 `width`，因为它更贴合网页实际显示效果。 ### 逻辑操作符 ### 组合多个条件，实现更精确的适配规则： - `and`：同时满足多个条件（例：`screen and (min-width: 768px) and (max-width: 1199px)`，平板屏幕）。 - `,`（逗号）：满足任意一个条件（例：`(max-width: 767px), (orientation: portrait)`，移动端或竖屏）。 - `not`：排除某个条件（例：`not print`，非打印设备）。 - `only`：仅当设备完全匹配条件时生效（避免老旧浏览器误解析，例：`only screen and (min-width: 768px)`）。 ## 二、关键工作原理与 Viewport ## 媒体查询生效的前提是 *正确配置 Viewport（视口）*，否则即使写了媒体查询，也可能出现“样式错乱”。 ### 浏览器解析流程 ### - 浏览器加载 HTML 时，读取 `` 标签，确定视口大小。 - 解析 CSS 样式，识别 `@media` 规则。 - 检测当前设备特性（如屏幕宽度、方向），匹配对应的媒体查询条件。 - 应用满足条件的 CSS 规则，覆盖默认样式。 ### Viewport 元标签的必要性 ### 移动设备默认视口宽度约为 *980px*（模拟桌面端），若不配置 Viewport，网页会被“缩放”以适应屏幕，导致媒体查询失效。 **必须在 HTML 的 `` 中添加以下代码**： ```html ``` - `device-width`：让视口宽度等于设备屏幕宽度。 - `initial-scale=1.0`：初始缩放比例为 1（无缩放）。 - `shrink-to-fit=no`：禁止浏览器自动收缩内容（适配 iOS 设备）。 ## 三、进阶策略：移动优先 vs 桌面优先 ## 媒体查询的适配思路分为两种，选择哪种直接影响代码结构和维护成本。 ### 移动优先（推荐） ### 核心逻辑：先写 移动端样式（默认样式），再用 `min-width` 向上适配平板、PC。 优势：移动设备用户占比高，代码更简洁（避免大量 `max-width` 覆盖）。 示例： ```css /* 移动端默认样式（≤ 767px） */ .container { width: 100%; padding: 0 15px; } /* 平板（≥ 768px） */ @media (min-width: 768px) { .container { width: 750px; margin: 0 auto; } } /* PC（≥ 1200px） */ @media (min-width: 1200px) { .container { width: 1140px; } } ``` ### 桌面优先 ### 核心逻辑：先写 PC 端样式（默认样式），再用 max-width 向下适配平板、移动端。 劣势：需频繁覆盖 PC 样式，代码冗余度高。 示例： ```css /* PC 默认样式（≥ 1200px） */ .container { width: 1140px; margin: 0 auto; } /* 平板（≤ 1199px） */ @media (max-width: 1199px) { .container { width: 750px; } } /* 移动端（≤ 767px） */ @media (max-width: 767px) { .container { width: 100%; padding: 0 15px; } } ``` ### 两者对比 ### | 维度 | 移动优先（min-width） | 桌面优先（max-width） | | :-----------: | :-----------: | :-----------: | | 默认样式 | 移动端 | PC 端 | | 适配方向 | 从小到大（向上） | 从大到小（向下） | | 代码冗余度 | 低（少覆盖） | 高（多覆盖） | | 推荐场景 | 移动端用户为主的项目 | 传统 PC 项目迁移 | ## 四、10 个实战适配案例（一套代码适配 H5/PC） ## 以下案例均采用 **移动优先策略**，基于行业通用断点： - 移动端：`≤ 767px` - 平板：`768px ~ 1199px` - PC：`≥ 1200px` 每个案例包含 完整 `HTML + CSS` 代码 及适配逻辑解析。 ### 案例 1：基础两栏/单列布局切换 ### 需求：移动端显示单列内容，PC 端显示“侧边栏+主内容”两栏布局。 :::demo ```vue ``` ::: ### 案例 2：响应式字体大小 ### 需求：屏幕越小，字体越小（避免移动端文字溢出），且保持可读性。 :::demo ```vue ``` ::: ### 案例 3：图片自适应与艺术方向 ### 需求：1. 图片宽度自适应容器；2. 移动端显示裁剪后的图片（突出主体），PC 端显示完整图片。 :::demo ```vue ``` ::: ### 案例 4：导航栏（横向 → 汉堡菜单） ### 需求：移动端显示“汉堡按钮”（点击展开菜单），PC 端显示横向导航。 :::demo ```vue ``` ::: ### 案例 5：表格移动端横向滚动 ### 需求：PC 端正常显示表格，移动端表格可横向滚动（避免单元格挤压变形）。 :::demo ```vue ``` ::: ### 案例 6：卡片布局（多列 → 单列） ### 需求：移动端单列卡片，平板双列，PC 四列，实现“自适应网格”。 :::demo ```vue ``` ::: ### 案例 7：元素显示/隐藏控制 ### 需求：移动端隐藏“PC 专属广告位”，PC 端隐藏“移动端悬浮按钮”。 :::demo ```vue ``` ::: ### 案例 8：按钮尺寸与间距适配 ### 需求：屏幕越小，按钮越小、间距越小（避免移动端按钮占满屏幕）。 :::demo ```vue ``` ::: ### 案例 9：视频/iframe 响应式 ### 需求：视频/iframe（如嵌入的 YouTube 视频）宽度自适应，且保持 16:9 比例（避免拉伸变形）。 :::demo ```vue ``` ::: ### 案例 10：跟随系统偏好的深色模式 ### 需求：根据用户系统设置（浅色/深色）自动切换网页主题，且支持手动切换。 :::demo ```vue ``` ::: ## 五、常见问题与解决方案 ## ### 媒体查询不生效？ ### - 检查是否添加 `viewport` 元标签（必加）。 - 确认媒体特性的单位（如 `min-width: 768` 漏写 `px`）。 - 避免使用 `device-width`，优先用 `width`（适配视口更准确）。 ### 样式优先级冲突？ ### - 媒体查询的选择器权重与普通 CSS 一致，若要覆盖默认样式，需保证选择器权重更高（例：`.container` 无法覆盖 `div.container`）。 - 避免滥用 `!important`，优先通过调整选择器权重解决。 ### 断点如何选择？ ### - 参考行业通用断点（320px、768px、1200px），而非针对特定设备（如 iPhone 14 的 390px）。 - 按“内容断点”调整：当内容出现溢出/留白时，再添加断点（而非固定设备尺寸）。 ## 六、总结与未来趋势 ## CSS3 媒体查询是响应式设计的“基石”，通过它可实现“一套代码适配全端”，大幅降低开发和维护成本。目前，媒体查询仍是前端适配的核心技术，但未来会与 *容器查询（Container Queries）* 互补——容器查询允许根据“父容器尺寸”适配样式（而非仅依赖视口），更适合组件化开发。