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

作者 | 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 中使用,在 <link> <style> 等 HTML 标签上设置 media 属性,可以实现在不同设备上使用不同文件。特别是使用媒体查询的样式比较多时,可以独立为一个文件,通过在 <link>标签中设置媒体查询条件。

<!-- 在 viewport 宽度小于 800px 时,应用 example.css 中的样式 --><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 网页可能呈现在手机、平板、可穿戴等多种设备上,仅仅使用媒体类型检测设备特征是一项艰巨的任务,因此通常需要结合更多的媒体特征来进行判断。

 

媒体特征

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

设备特征 取值 说明
width 长度数值,如600px viewport 宽度
height 长度数值,如600px viewport 高度
aspect-raido 整数或小数 viewport 宽高比,值为宽度/高度
orientation portrait 或 landscape 当前 viewport 方向,垂直或水平
resolution‍‍ ‍‍数值 设备分辨率,如 300dpi
color 正整数 设备输出颜色的位数,黑白屏幕设备值为0
scan progressive 或 interlace 输出设备的扫描方式,大部分现代屏幕使用 progressive 渐进式方式,部分等离子电视使用 interlace 隔行扫描
grid 0 或 1 设备是否使用 grid 类型屏幕


另外,对于部分取值为数值的属性,媒体查询可以使用 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 页面细节,为用户提供更好的体验。

未经允许不得转载:大自然的搬运工 » 响应式布局进阶篇 – 媒体查询

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址