一、什么是 CSS 媒体查询
CSS 媒体查询是 CSS3 引入的核心特性，是对 CSS2 媒体类型的扩展。它的核心能力是先判断当前设备 / 环境的特性，当条件完全匹配时，再执行括号内的 CSS 样式规则。
最典型的应用场景，就是根据屏幕宽度调整页面布局：PC 端的 4 列内容布局，在平板端自动切换为 2 列，在手机端切换为 1 列，这一效果的核心实现方式就是媒体查询。你在文中看到的@media screen and (max-width:600px)，就是最经典的媒体查询写法之一
二、媒体查询的核心语法与组成
完整的媒体查询语法结构如下：
@media [媒体类型] [逻辑运算符] (媒体特性表达式) {
/* 条件匹配时生效的CSS样式 */
}我们可以将其拆解为 3 个核心组成部分，每一部分都决定了样式的生效规则。
1. 媒体类型（Media Type）
用于指定样式生效的设备类型，相当于给样式划定了基础的设备范围，常用类型如下：
all：默认值，匹配所有设备，无设备类型限制screen：匹配电脑、平板、手机等所有带屏幕的设备，是开发中最常用的类型print：匹配打印 / 打印预览场景，专门用于优化页面打印效果speech：匹配屏幕阅读器等语音合成设备，用于无障碍适配
2. 逻辑运算符
用于连接多个规则，实现复杂的多条件判断，核心运算符有 4 个：
and：逻辑与，必须同时满足所有连接的条件，样式才会生效- 逗号
,：逻辑或，满足任意一个分隔的条件，样式即可生效 not：逻辑非，否定整个查询条件，条件不匹配时样式生效only：仅当整个查询完全匹配时生效，主要用于兼容老旧浏览器，现代浏览器基本无需使用
其中and是最常用的运算符，比如示例@media screen and (max-width:600px)，就是要求同时满足「设备为带屏幕的设备」+「屏幕最大宽度不超过 600px」两个条件，样式才会生效。
3. 媒体特性（Media Feature）
媒体查询的核心，用于描述设备 / 环境的具体特征，必须用括号()包裹 ，绝大多数特性都支持min-和max-前缀，用于实现区间判断。
开发中 90% 的适配场景，都会用到以下 3 个宽度相关的核心特性：
width：浏览器视口（viewport）的宽度max-width：视口的最大宽度，视口宽度 **≤** 设定值时匹配min-width：视口的最小宽度，视口宽度 **≥** 设定值时匹配
三、核心特性详解：max-width 与 min-width 的正确用法
max-width和min-width是媒体查询中最高频使用的特性，也是新手最容易混淆的知识点，这里我们彻底讲透两者的区别与使用场景。
1. max-width：上限匹配，「不超过」时生效
匹配规则：当视口宽度小于等于设定值时，样式生效，相当于给样式生效设置了一个宽度上限。
示例（就是文中开头的示例）：
/* 当屏幕宽度 ≤ 600px 时，样式生效，适配小屏手机 */
@media screen and (max-width: 600px) {
body {
background-color: #f5f5f5;
}
.container {
width: 100%;
padding: 0 10px;
}
}适用场景：桌面端优先 的适配方案，先写 PC 端默认样式，再通过max-width往更小的屏幕覆盖样式。
2. min-width：下限匹配，「超过」时生效
匹配规则：当视口宽度大于等于设定值时，样式生效，相当于给样式生效设置了一个宽度下限。
示例：
/* 当屏幕宽度 ≥ 768px 时，样式生效，适配平板及以上设备 */
@media screen and (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}适用场景：移动端优先 的适配方案，先写移动端默认样式，再通过min-width往更大的屏幕覆盖样式，也是 Bootstrap、Tailwind 等主流 UI 框架的核心适配思路。
3. 区间匹配：精准锁定宽度范围
同时使用min-width和max-width，可以实现仅在某个宽度区间内生效的样式，适配更精准。
示例：
/* 仅当屏幕宽度在768px ~ 1200px之间时，样式生效，专门适配平板端 */
@media screen and (min-width: 768px) and (max-width: 1200px) {
.card-list {
grid-template-columns: repeat(2, 1fr);
}
}四、两种主流适配写法：移动端优先 vs 桌面端优先
响应式开发有两种核心适配思路，对应min-width和max-width两种写法，我们分别讲解其特点、写法与适用场景。
1. 桌面端优先（Desktop First）
核心思路：先完成 PC 端的默认样式开发，再通过max-width，从大屏往小屏逐步覆盖样式，适配平板、手机端。写法特点：断点从大到小写，核心使用max-width。
完整示例：
/* 默认样式：PC端大屏，4列布局 */
.card-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* 平板端：≤1200px，切换为2列布局 */
@media screen and (max-width: 1200px) {
.card-list {
grid-template-columns: repeat(2, 1fr);
}
}
/* 手机端：≤768px，切换为1列布局 */
@media screen and (max-width: 768px) {
.card-list {
grid-template-columns: repeat(1, 1fr);
}
}- 优点：PC 端样式优先，开发逻辑直观，适合以 PC 端为主的网站（如后台管理系统、企业官网）
- 缺点：移动端会加载大量用不到的 PC 端样式，性能略有损耗
2. 移动端优先（Mobile First）
核心思路：先完成移动端的默认样式开发，再通过min-width，从小屏往大屏逐步覆盖样式，适配平板、PC 端。写法特点：断点从小到大写，核心使用min-width，是目前行业主流推荐的写法。
完整示例：
/* 默认样式：手机端，1列布局 */
.card-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 15px;
}
/* 平板端：≥768px，切换为2列布局 */
@media screen and (min-width: 768px) {
.card-list {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* PC端：≥1200px，切换为4列布局 */
@media screen and (min-width: 1200px) {
.card-list {
grid-template-columns: repeat(4, 1fr);
}
}- 优点：移动端样式优先，样式按需加载，性能更好，符合移动互联网为主的行业趋势
- 缺点：若网站以 PC 端为核心使用场景，开发逻辑会稍显繁琐
关键注意点：CSS 具有层叠性，后面的样式会覆盖前面的样式。因此
min-width写法必须从小到大 排序断点，max-width写法必须从大到小排序断点，否则会出现样式覆盖失效的问题。
五、媒体查询高频使用场景与代码示例
除了布局适配，媒体查询还有很多实用的开发场景，这里提供可直接复用的代码示例。
1. 字体大小适配
根据屏幕尺寸动态调整基础字体大小，保证全端的阅读体验。
/* 移动端默认字体 */
html {
font-size: 14px;
}
/* 平板端 */
@media screen and (min-width: 768px) {
html {
font-size: 15px;
}
}
/* PC端 */
@media screen and (min-width: 1200px) {
html {
font-size: 16px;
}
}2. 元素的显示与隐藏
根据设备类型，控制导航、广告等元素的显示与隐藏，是移动端导航栏的经典实现方案。
/* 移动端默认：隐藏PC端导航，显示汉堡菜单 */
.pc-nav {
display: none;
}
.hamburger-menu {
display: block;
}
/* PC端：显示完整导航，隐藏汉堡菜单 */
@media screen and (min-width: 768px) {
.pc-nav {
display: flex;
}
.hamburger-menu {
display: none;
}
}3. 横竖屏适配
针对手机横竖屏切换，调整页面样式，优化横屏浏览体验。
/* 竖屏时 */
@media screen and (orientation: portrait) {
.banner {
height: 40vh;
}
}
/* 横屏时 */
@media screen and (orientation: landscape) {
.banner {
height: 80vh;
}
}4. 打印样式优化
专门针对打印场景，隐藏非必要元素，优化打印内容的排版。
@media print {
/* 隐藏不需要打印的导航、页脚、广告等元素 */
.nav, .footer, .ad {
display: none;
}
/* 优化打印内容的边距与颜色 */
.content {
width: 100%;
margin: 0;
padding: 0;
color: #000;
}
}5. 深色模式适配
跟随系统的深色 / 浅色主题，自动切换页面样式，实现系统级主题适配。
/* 系统浅色模式 */
@media (prefers-color-scheme: light) {
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
}
/* 系统深色模式 */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #ffffff;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}六、进阶技巧与性能优化
1. 结合 CSS 变量实现响应式
将响应式属性值用 CSS 变量统一管理，大幅减少重复代码，提升样式的可维护性。
/* 全局变量定义 */
:root {
--grid-columns: 1;
--font-size-base: 14px;
--gap-size: 15px;
}
/* 平板端修改变量 */
@media screen and (min-width: 768px) {
:root {
--grid-columns: 2;
--font-size-base: 15px;
--gap-size: 20px;
}
}
/* PC端修改变量 */
@media screen and (min-width: 1200px) {
:root {
--grid-columns: 4;
--font-size-base: 16px;
}
}
/* 业务代码直接使用变量，无需重复写媒体查询 */
.card-list {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--gap-size);
}
html {
font-size: var(--font-size-base);
}2. CSS 原生嵌套写法
现代浏览器已支持 CSS 原生嵌套，媒体查询可直接写在选择器内部，代码更集中，维护更方便。
.card-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 15px;
/* 直接嵌套媒体查询 */
@media screen and (min-width: 768px) {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media screen and (min-width: 1200px) {
grid-template-columns: repeat(4, 1fr);
}
}3. 性能优化核心要点
- 统一管理断点：避免为每个元素单独写媒体查询，通用 3-4 个断点即可覆盖绝大多数场景，减少样式计算开销
- 媒体查询写在 CSS 末尾：利用 CSS 层叠性，保证适配样式能覆盖默认样式，同时避免页面重复渲染
- 避免滥用！important：保证媒体查询内的选择器权重≥默认样式的选择器权重，减少样式优先级冲突
- 首屏关键样式内联：将首屏的响应式样式内联在 HTML 的 head 中，避免 CSS 加载延迟导致的样式闪烁
七、新手必看：避坑指南
这里总结了媒体查询开发中最高频的 8 个踩坑点，帮你提前规避问题。
-
忘记设置 viewport meta 标签，移动端媒体查询失效移动端浏览器默认会将页面缩放到 980px 宽度，导致媒体查询的宽度判断完全失效。必须在 HTML 的 head 中添加以下代码，这是移动端响应式的前提：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
and 运算符左右缺少空格，样式不生效 错误写法：
@media screen and(max-width:600px)，and与括号之间必须保留空格，否则浏览器无法识别。正确写法：@media screen and (max-width:600px) -
max-width 与 min-width 的逻辑搞反 记住核心口诀：max 是上限，越小越优先；min 是下限，越大越优先，避免条件判断完全相反。
-
断点顺序错误，样式被覆盖
min-width（移动端优先）：断点必须从小到大排序（768px → 1200px → 1920px）max-width（桌面端优先）：断点必须从大到小排序（1920px → 1200px → 768px）
-
选择器权重不足，适配样式被覆盖保证媒体查询内的选择器权重，大于等于默认样式的选择器权重，避免默认样式覆盖适配样式。
-
忽略滚动条对宽度的影响 PC 端浏览器的滚动条会占用视口宽度，导致断点触发时机与预期不符。可通过
scrollbar-gutter属性预留滚动条位置，或断点设置时预留 10-20px 的冗余。
八、核心知识点汇总速查表
表 1：CSS 媒体类型汇总表
| 媒体类型 | 说明 | 核心适用场景 |
|---|---|---|
| all | 默认值，匹配所有设备 | 通用样式，无设备区分的适配 |
| screen | 匹配所有带屏幕的设备（电脑、平板、手机） | 网页常规响应式适配，最常用 |
| 匹配打印 / 打印预览模式 | 优化页面打印效果，隐藏非必要元素 | |
| speech | 匹配屏幕阅读器等语音合成设备 | 无障碍适配，优化视障用户的朗读体验 |
表 2：常用媒体特性汇总表
| 媒体特性 | 支持前缀 | 核心说明 | 常用示例 |
|---|---|---|---|
| width | min-/max- | 浏览器视口的宽度 | (min-width:768px)、(max-width:600px) |
| height | min-/max- | 浏览器视口的高度 | (min-height:600px) |
| orientation | 无 | 设备横竖屏状态，取值portrait（竖屏）/landscape（横屏） |
(orientation:portrait) |
| aspect-ratio | min-/max- | 视口的宽高比 | (aspect-ratio:16/9) |
| resolution | min-/max- | 设备的分辨率，单位 dpi/dppx | (min-resolution:2dppx) |
| prefers-color-scheme | 无 | 系统的深色 / 浅色模式，取值light/dark |
(prefers-color-scheme:dark) |
表 3：媒体查询逻辑运算符汇总表
| 运算符 | 语法规则 | 核心作用 | 示例 |
|---|---|---|---|
| and | 条件 1 and 条件 2 | 逻辑与，所有条件同时满足才生效 | screen and (min-width:768px) and (max-width:1200px) |
| ,(逗号) | 条件 1, 条件 2 | 逻辑或，满足任意一个条件就生效 | screen, print |
| not | not 完整查询条件 | 逻辑非，否定整个查询，不匹配时生效 | not print |
| only | only 完整查询条件 | 仅当整个查询完全匹配时生效，兼容老旧浏览器 | only screen and (max-width:600px) |
表 4：行业通用响应式断点参考表（移动端优先）
| 断点等级 | 断点阈值 | 对应设备类型 | 核心适配说明 |
|---|---|---|---|
| 超小屏（xs） | < 576px | 竖屏手机 | 移动端默认样式，单列布局，紧凑间距 |
| 小屏（sm） | ≥ 576px | 横屏手机 / 小尺寸平板 | 微调布局，增加间距，可双列布局 |
| 中屏（md） | ≥ 768px | 平板 / 折叠屏手机 | 双列布局为主，导航栏完整展示 |
| 大屏（lg） | ≥ 992px | 小型笔记本电脑 | 三列布局，适配常规办公屏幕 |
| 超大屏（xl） | ≥ 1200px | 台式机 / 大屏笔记本 | 四列布局，完整 PC 端样式 |
| 2K 屏（xxl） | ≥ 1400px | 2K/4K 高分辨率屏幕 | 固定最大宽度，避免内容拉伸 |