跟着 MDN 学CSS day_45：媒体查询入门指南——从语法到移动优先实践

一、前言：媒体查询的核心地位

在响应式网页设计的三大技术支柱中，媒体查询扮演着触发器的角色。它赋予开发者检测浏览器和设备环境的能力，使CSS能够根据不同的条件选择性地应用样式规则。视口宽度超过某个阈值时切换为多栏布局，设备处于横放状态时调整元素排列方式，检测到触摸屏时增大交互区域，这些场景都依赖媒体查询来实现。

媒体查询的语法简洁而富有表达力。一个完整的媒体查询由媒体类型、媒体特征规则和CSS规则块三部分组成。媒体类型指定样式适用于哪类媒体，如屏幕、打印或语音。媒体特征规则定义需要满足的条件，如最小宽度、朝向或指针类型。CSS规则块则包含条件满足时实际应用的样式声明。

理解媒体查询不仅仅是记忆语法，更重要的是掌握断点选择策略、移动优先设计方法和现代布局技术的配合使用。本文将沿着MDN的学习路径，系统地讲解媒体查询的基础语法、逻辑组合、断点选择原则，并通过一个完整的移动优先响应式设计教程，将理论知识转化为实践能力。

二、媒体查询的基础语法结构

媒体查询的最简形式直观明了。它以@media关键字开头，后接媒体类型和媒体特征规则，最后是一对花括号包裹的CSS规则块。

css 复制代码

@media media-type and (media-feature-rule) {
    /* 条件满足时应用的CSS规则 */
}

这个结构中的每一部分都有明确的职责。media-type告诉浏览器这段样式用于何种媒体环境。media-feature-rule是一个测试条件，浏览器会评估当前环境是否满足这个条件。and关键字将类型和特征连接起来，表示两者必须同时满足。花括号内的CSS规则只有在整个表达式为真时才会生效。

媒体类型有四种可选值。all表示适用于所有媒体类型，这也是不指定媒体类型时的默认值。print用于打印预览和打印输出场景。screen用于屏幕显示设备，包括桌面显示器、笔记本、平板和手机屏幕。speech用于语音合成器，辅助视障用户浏览网页的屏幕阅读器就属于这一类。

css 复制代码

@media print {
    body {
        font-size: 12pt;
    }
}

打印样式是媒体查询的经典用例。屏幕浏览时可能使用较大的字号和丰富的颜色，但打印时需要调整为适合纸张的排版。将正文字号设为12pt，可以隐藏导航栏和广告等不必要的元素，调整链接的显示方式，这些都能在打印媒体查询中集中处理。print媒体类型确保这些样式只在打印时生效，不会影响屏幕显示效果。

需要注意的是，媒体查询规范早期定义过其他媒体类型，如tv、projection等，但它们已经被废弃，不应再使用。在现代Web开发中，screen和print是最常用的两种类型，不写媒体类型则默认覆盖所有情况。

三、宽高特征与数值范围查询

视口宽度是最常用的媒体特征，也是响应式布局的核心检测对象。min-width、max-width和width三个特征分别检测视口宽度的最小值、最大值和精确值。

css 复制代码

@media screen and (width: 600px) {
    body {
        color: red;
    }
}

这个媒体查询在视口宽度恰好等于600像素时将文本颜色设为红色。width特征使用等号进行精确匹配。这种精确匹配在实际开发中使用较少，因为屏幕尺寸千差万别，恰好命中某个特定宽度的概率很低。但在测试和调试场景中，精确匹配可以帮助开发者验证特定宽度下的样式表现。

min-width和max-width的使用频率远高于width。min-width检测视口宽度是否大于或等于指定值，适合移动优先策略中逐步增强的布局调整。max-width检测视口宽度是否小于或等于指定值，适合桌面优先策略中逐步降级的布局简化。

css 复制代码

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

max-width: 400px的含义是当视口宽度不超过400像素时应用内部样式。这通常用于处理小屏幕设备上的显示问题。当用户在手机上浏览时，视口宽度可能只有375像素，这个媒体查询就会触发，将文本颜色调整为蓝色。

宽度特征同样适用于高度检测。min-height和max-height用于检测视口高度的范围。在某些场景中，比如需要确保关键内容在首屏可见时，高度检测比宽度检测更有意义。全屏展示的页面或模态窗口也可能需要根据视口高度调整内部元素的尺寸和排列。

媒体查询第三级规范定义了这些核心特征，它们拥有最广泛的浏览器支持。第四级和第五级规范引入了更多新特征，但支持程度参差不齐，使用时需要查阅兼容性数据。

四、朝向检测与设备姿态适配

朝向特征orientation是另一个得到广泛支持的媒体特征。它只有两个取值：portrait表示竖放模式，视口高度大于宽度；landscape表示横放模式，视口宽度大于高度。

css 复制代码

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

这个媒体查询在设备处于横向状态时改变文本颜色。对于桌面设备，浏览器窗口默认就是横向的，因此这个查询通常会匹配。对于手机和平板，用户需要旋转设备才能触发横向样式。

朝向检测的实际价值在于优化不同姿态下的布局。横向屏幕有更多的水平空间，适合展示多栏布局、侧边栏和更宽的图片。竖向屏幕则更适合单栏堆叠布局，便于单手操作和垂直滚动浏览。

一个常见的设计场景是，网页在横屏桌面端使用左右两栏布局，左侧是主要内容，右侧是侧边栏。在竖屏手机上，将两栏改为上下堆叠，侧边栏移到内容下方。这种布局切换可以通过组合宽度和朝向查询来实现。

朝向查询不需要指定媒体类型。省略媒体类型时，查询默认应用于所有媒体类型。由于朝向特征主要与屏幕显示相关，这个默认行为通常是合理的。如果需要在打印时也考虑朝向，可以明确指定print媒体类型。

五、交互能力检测：悬浮与指针特征

第四级媒体查询规范引入了与用户交互方式相关的特征，其中hover和pointer是两个具有重要实践价值的补充。

hover特征检测用户是否能够在元素上进行悬浮操作。它的取值包括hover和none。hover表示用户有某种指点设备可以悬浮在元素上方，如鼠标或触控板。none表示用户无法进行悬浮操作，如使用触摸屏或键盘导航。

css 复制代码

@media (hover: hover) {
    body {
        color: rebeccapurple;
    }
}

当检测到用户可以悬浮时，这个媒体查询改变文本颜色。这背后的设计思路是区分交互模式。悬浮用户可以受益于悬浮触发的下拉菜单、工具提示和预览效果。触摸屏用户无法触发这些交互，因此需要采用不同的交互设计，比如点击展开菜单、长按显示工具提示。

pointer特征进一步细化了对指点设备的检测。它有三个取值：none表示没有指点设备，用户可能在使用键盘导航或语音控制；coarse表示指点设备精度有限，典型代表是触摸屏上的手指触摸；fine表示高精度指点设备，如鼠标或触控笔。

利用pointer特征，开发者可以针对不同精度优化交互区域的尺寸。手指触摸需要至少44像素见方的触摸目标才能准确点击，而鼠标可以精确定位到几个像素。检测到coarse指针时增大按钮和链接的可点击区域，能够显著提升触摸屏用户的体验。

css 复制代码

@media (pointer: coarse) {
    .button {
        padding: 16px 24px;
        min-height: 48px;
    }
}

这些交互媒体特征是渐进增强的典型用例。基础样式为所有用户提供可用的交互体验，对于拥有更精确输入设备的用户，再通过媒体查询添加更精细的交互优化。这种分层设计确保了基本功能的全覆盖，同时为不同设备提供了因地制宜的体验提升。

六、逻辑操作符：组合多个查询条件

单一条件的媒体查询往往不足以描述复杂的设计需求。CSS媒体查询提供了三种逻辑操作符，允许开发者组合多个条件，构建精确的匹配规则。

and操作符实现逻辑与运算，要求所有条件同时满足。它可以连接媒体类型和多个媒体特征，只有当每个部分都为真时，整个查询才匹配。

css 复制代码

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

这个查询包含三个条件：媒体类型必须是screen，视口宽度至少为400像素，设备处于横向状态。三个条件缺一不可。这种多条件组合精确锁定了特定的浏览环境，避免样式在不符合预期的场景中误应用。

逗号操作符实现逻辑或运算。用逗号分隔的多个媒体查询构成一个查询列表，只要其中任何一个查询匹配，整个列表就匹配。

css 复制代码

@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

这个查询列表包含两个独立的媒体查询，它们之间是或的关系。当视口宽度达到400像素，或者设备处于横向状态时，文本都会变为蓝色。如果两个条件同时满足，结果同样是匹配。逗号分隔的写法避免了重复书写相同的CSS规则块，保持了代码的简洁性。

not操作符实现逻辑非运算，它反转整个媒体查询的匹配结果。原本匹配的变成不匹配，原本不匹配的变成匹配。

css 复制代码

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

这个查询的含义需要仔细理解。not作用于整个媒体查询，即not (all and (orientation: landscape))。它匹配的不是横向的设备，也就是竖向的设备。all在这里是必需的，因为not后面必须跟着一个完整的媒体查询。not不能单独作用于某个特征，它总是反转整个查询表达式。

not操作符的引入让条件表达更加灵活。在某些场景中，描述不匹配的条件比描述匹配的条件更简单。比如希望在大屏幕以外的所有屏幕上应用某样式，使用not all and (min-width: 1024px)比列举所有小于1024像素的断点更加直观。

七、断点选择策略：从设备尺寸到内容需求

断点的选择是媒体查询使用中最需要策略思考的环节。早期的响应式设计实践倾向于根据主流设备的屏幕尺寸设置断点。iPhone的320像素和375像素，iPad的768像素和1024像素，这些数字一度成为断点设置的默认标准。

这种设备导向的断点策略在今天已经不再适用。设备种类爆炸式增长，从小巧的智能手表到大尺寸的桌面显示器，屏幕尺寸的跨度远远超出了有限的几个断点能够覆盖的范围。新设备的不断涌现意味着以特定设备为参照的断点会迅速过时。

内容导向的断点策略是更可持续的选择。开发者不再关注设备的具体尺寸，而是观察内容在不同宽度下的表现。当文本行过长影响阅读流畅性时，当侧边栏与主内容区比例失调时，当图片因为容器过窄而失去视觉冲击力时，就是引入断点的合适时机。

使用浏览器开发者工具的响应式设计模式是确定断点的有效方法。拖拽视口边缘，观察布局从窄到宽的变化过程，记录下内容开始出现显示问题的宽度。这些宽度值就是自然的断点候选。

em单位在断点中的使用值得注意。使用em而不是像素设置断点，可以让断点随用户的字体大小设置而缩放。

css 复制代码

@media screen and (min-width: 40em) {
    /* 两栏布局 */
}

@media screen and (min-width: 70em) {
    /* 三栏布局 */
}

如果用户增大了浏览器的默认字号，以em为单位的断点会相应增大，布局切换发生在更宽的视口上。这确保了增大的文本仍然有足够的空间，不会因为布局切换过早而挤在一起。使用像素断点则无法响应字号变化，大字号用户可能看到拥挤的布局。

八、移动优先实践：从小屏幕开始的渐进增强

移动优先的响应式设计策略将设计过程的起点放在最小的屏幕上。先为移动设备编写基础CSS，这通常也是最简单的单列布局。然后通过min-width媒体查询逐步引入更复杂的布局，利用越来越充裕的屏幕空间。

这种策略的优势是多方面的。移动端的限制条件更加严格，窄屏幕、触摸交互、性能限制等因素迫使开发者专注于核心内容和功能。从移动端开始设计，天然地筛选出了最重要的元素，避免了桌面端过度设计后再删减的痛苦过程。

基础样式的编写不需要媒体查询。在教程示例中，初始CSS只包含颜色、字体、间距等基础设置，没有涉及任何布局相关的属性。

css 复制代码

body {
    width: 90%;
    margin: 2em auto;
    font: 1em/1.3 Arial, Helvetica, sans-serif;
}

这些基础样式在移动端直接呈现出可用的单列布局。HTML源代码的顺序决定了内容的显示顺序，移动用户可以看到按逻辑排列的内容，无需额外的布局干预。这是一个重要的原则：先确保内容在任何设备上都能被正常访问和阅读。

第一个断点在内容行开始变得过长时引入。当视口宽度达到40em时，有足够的水平空间将导航链接排成一行，并将文章内容区改为两栏布局。

css 复制代码

@media screen and (min-width: 40em) {
    article {
        display: grid;
        grid-template-columns: 3fr 1fr;
        column-gap: 20px;
    }

    nav ul {
        display: flex;
    }

    nav li {
        flex: 1;
    }
}

栅格布局将文章内容与相关信息并列为两栏，三比一的比例分配空间。弹性盒让导航链接水平排列，每个链接占据相等的弹性空间。这个断点后的布局相比移动端，信息密度有所提升，但依然保持清晰的结构。

第二个断点在空间足以容纳第三个栏目时引入。在70em宽度下，主内容区可以再分为两栏，侧边栏有了独立的展示空间。

css 复制代码

@media screen and (min-width: 70em) {
    main {
        display: grid;
        grid-template-columns: 3fr 1fr;
        column-gap: 20px;
    }

    article {
        margin-bottom: 0;
    }

    footer {
        border-top: 1px solid #ccc;
        margin-top: 2em;
    }
}

每个断点除了调整大块布局，还需要处理细节样式。移除文章底部的多余外边距，让侧边栏在视觉上对齐。为页脚添加顶部边框，在视觉上分隔主内容区。这些细节调整是响应式设计中不可忽视的部分，它们让布局在不同宽度下都显得精致而有意。

九、超越媒体查询：现代布局的内置响应式能力

媒体查询虽然是响应式设计的核心工具，但它并不是唯一的解决方案。现代CSS布局模块，包括弹性盒、栅格和多列布局，都内置了响应式能力，在某些场景中可以完全替代媒体查询。

栅格布局的auto-fill和minmax组合是一个典型例子。这个技术可以在不使用任何媒体查询的情况下，创建根据容器宽度自动调整列数的网格。

css 复制代码

.grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

minmax(200px, 1fr)定义了列的尺寸范围。每列最小200像素宽，最大可以占满一份可用空间。auto-fill关键字告诉浏览器尽可能多地填充符合这个尺寸范围的列。

当容器宽度为650像素时，可以容纳三列，每列约217像素。当容器缩小到450像素时，只能容纳两列，每列约225像素。当容器继续缩小到250像素时，只能容纳一列，占据全部宽度。列数的变化完全自动，不需要任何媒体查询参与。

这种技术的优势在于它以组件自身而不是视口为参照。组件的响应式行为与它在页面中的位置和容器大小挂钩，而不是全局的视口宽度。同一个组件在侧边栏中可能显示为单列，在主内容区中显示为多列，这种上下文感知的响应能力是传统媒体查询难以实现的。

弹性盒同样具备内置的响应式能力。flex-wrap属性允许弹性项目在空间不足时自动换行，flex-grow和flex-shrink控制项目在空间变化时的伸缩行为。多列布局的column-width属性让列数随容器宽度自动调整。这些现代布局技术让开发者在许多场景中不再需要手动管理媒体查询。

然而，媒体查询仍然有其不可替代的价值。布局的大结构切换，如从单栏变为多栏，仍然需要媒体查询来明确指定。全局样式的调整，如在不同断点改变字号或间距，也需要媒体查询。最佳实践是将两者结合：用现代布局模块处理组件内部的响应式行为，用媒体查询控制整体布局结构的切换。

十、技能要点与实践建议

学习媒体查询需要掌握从语法到策略的完整知识体系。语法层面，理解媒体类型、媒体特征和逻辑操作符的配合使用。策略层面，掌握内容导向的断点选择方法和移动优先的设计流程。技术层面，了解现代布局模块与媒体查询的互补关系。

测试媒体查询的效果是开发过程中不可或缺的环节。浏览器开发者工具的响应式设计模式提供了便捷的视口模拟功能。在Firefox中，这个工具不仅能够模拟各种设备尺寸，还能直观显示当前视口的像素值，帮助确定断点位置。在Chrome中，设备工具栏提供了类似的功能和丰富的预设设备列表。

媒体查询的性能影响通常可以忽略不计。浏览器在评估媒体查询时非常高效，不匹配的查询中的CSS规则不会被应用，但样式表仍然会被下载。组织媒体查询的方式值得考虑。将所有媒体查询放在样式表末尾可以避免优先级问题，但按组件组织媒体查询可能更便于维护。

响应式设计的本质不是技术堆砌，而是对用户体验的关注。无论是使用媒体查询还是现代布局技术，最终目标都是确保内容在任何设备上都能清晰、可读、易于交互。掌握媒体查询只是手段，理解用户需求并作出恰当的设计响应才是真正的核心能力。

还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！