响应式布局进阶篇：媒体查询

编辑 | Brilliant Open Web团队

在前文的基础上，本文深入媒体查询（media query）标准细节，探讨在实践中如何灵活运用媒体查询，实现不同设备的响应式布局。

作为响应式布局的核心技术之一， 媒体查询（media query）提供了一种检测设备特征的方法，它使开发者可以根据不同的设备特征应用不同样式，为不同设备创建合适的用户体验。接下来本文就为大家详细介绍一下如何使用媒体查询。

创建媒体查询

创建媒体查询一般需要以下几个部分： 媒体类型，媒体特征和逻辑条件。在上一章响应式图片中，我们已经简单了解 CSS 中媒体查询的使用方法，在 CSS 中我们可以通过   @media  关键字创 建查询。如下面示例所示，在判断媒体类型为屏幕，并且媒体特征中 viewport 的宽度小于 800px 时，将 body 背景颜色设置为灰色。

<style>
@media screen and (max-width: 800px) {
body {
background: #ccc;
}
}
</style>

媒体查询也可以在 HTML 中使用，在  等 HTML 标签上设置 media 属性，可以实现在不同设备上使用不同文件。特别是使用媒体查询的样式比较多时，可以独立为一个文件，通过在 标签中设置媒体查询条件。

<link ref=“stylesheet” href=“example.css” media=“screen and (max-width: 800px)”>

媒体类型

媒体类型是呈现页面的用户设备类型，常见的媒体类型包括以下几种：

• all ：所有的设备类型，属于默认类型。如下面示例中省略媒体类型时，默认匹配所有类型设备。

• screen : 所有非 print 或者 speech 的设备。

• print : 打印机设备。

• speech : 屏幕阅读器等类似的发声设备。

/* 两种写法意义相同 */
@media (max-width: 320px) {…}
@media all and max-width: 320px {…}

由于移动设备发展迅速，Web 网页可能呈现在手机、平板、可穿戴等多种设备上，仅仅使用媒体类型检测设备特征是一项艰巨的任务，因此通常需要结合更多的媒体特征来进行判断。

媒体特征

媒体查询支持丰富的设备特征，除了我们最常看到的宽度和高度查询，还有一些其他的媒体特征比如方向、分辨率等对检测设备也很有用，更多常用的媒体特征详细信息可参考下表：

另外，对于部分取值为数值的属性，媒体查询可以使用  min- 或  max- 前缀表示范围，这为媒体查询提供了更方便的判断方式。例如使用 max-width: 320px 表示设备 viewport 的宽度小于等于 320px，min-width: 321px 表示 viewport 宽度大于等于 321px。

@media (max-width: 320px) { /* viewports <= 320px 时的样式*/ }
@media (min-width: 321px) { /* viewports >= 321px 时的样式*/ }

逻辑条件

通过使用 and、not、only 等逻辑条件关键词，可以组合多个媒体查询条件。

and

@media (min-width: 700px) { ... }

上面的示例是宽度大于 700px 的媒体查询条件，如果你只想在横屏情况时使用这个条件，可以如下所示使用 and 操作符来合并媒体属性。

@media (min-width: 700px) and (orientation: landscape) { ... }

not 和 only

使用 not 可以不在某种条件下使用当前媒体查询规则，如以下示例中媒体查询匹配 viewport 宽度大于 320px 且不是打印机的设备。

@media not print and (min-width: 320px) { ... }

而使用 only 可以仅在某种条件下使用规则，如示例中仅在 viewport 宽度大于 320px 的屏幕设备中使用。

@media only screen and (min-width: 320px) { ... }

使用媒体查询设置断点

如何选择网站内容的响应点，即如何选择不同 viewport 的 min-width 和 max-width 的取值，我们称为选择断点。在设计断点时，可以从最小支持的屏幕宽度开始，逐渐增加屏幕宽度，覆盖不同尺寸屏幕的体验。断点的设置主要取决于产品设计本身，没有万能媒体查询的代码。但经过实践，我们也总结了一套比较具有代表性的设备断点，代码如下：

/* 很小的设备（手机等，小于 600px） */
@media only screen and (max-width: 600px) {…}
/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
@media only screen and (min-width: 600px) {…}
/* 中型大小设备（横屏的平板, 大于 768px） */
@media only screen and (min-width: 768px) {…}
/* 大型设备（电脑, 大于 992px） */
@media only screen and (min-width: 992px) {…}
/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */

@media only screen and (min-width: 1200px) {…}

如果要对细分屏幕大小进行适配，可以查看文章 《media queries for common device breakpoints》列出了详细的常见设备的媒体查询条件。

总结

本文首先介绍浏览器提供媒体查询的目的，接着通过多个示例详细介绍了如何创建媒体查询，最后总结使用媒体查询设置断点时，常见的思路和实践经验。使用媒体查询，可以更好的设计响应式布局，优化不同尺寸设备呈现的 Web 页面细节，为用户提供更好的体验。

本文内容主要来自开源书籍 《PWA 应用实战》 。该书由百度 Web 生态团队撰写与分享，记录了团队过去两年积累的 PWA 方面的经验，欢迎对 Web 和 PWA 有浓厚兴趣的读者加入我们，一起来维护这本书。

Brilliant Open Web 

BOW（Brilliant Open Web）团队，是一个专门的Web技术建设小组，致力于推动 Open Web 技术的发展，让Web重新成为开发者的首选。

BOW 关注前端，关注Web；剖析技术、分享实践；谈谈学习，也聊聊管理。

关注 OpenWeb开发者，让我们一起推动 OpenWeb技术的发展！

OpenWeb开发者

ID：BrilliantOpenWeb

技术连接世界，开放赢得未来