响应式Web设计 - 媒体查询

1. 概述

“响应式设计（Responsive Design）” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！媒体查询是实现响应式设计所需的最强大的工具。我们可以使用媒体查询在不同的显示设备上呈现不同的显示效果，如PC、投影仪、平板、手机、打印机。

2. 媒体查询 in CSS2

从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。

在上面的代码示例中，media 属性定义了应该用于指定每种媒体类型的样式表：

• screen 适用于计算机彩色屏幕。
• print 适用于打印预览模式下查看的内容或者打印机打印的内容。

3. 媒体查询 in CSS3

从CSS版本3开始，媒体查询作为规范的一部分，可以扩展媒体类型函数，并允许在样式表中使用更精确的显示规则。媒体查询是评估 True 或 False 的一种表达。如果为 True，则继续使用样式表。如果为 False，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，使您能够更灵活地对特定的设计场景使用自定义的显示规则。

3.1 语法说明

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

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

在上面的代码示例中，宽度大于或等于 800 像素的屏幕（屏幕和打印等），且可见区域宽度大于或等于高度时，应使用其 CSS 规则。
对于该媒体查询：

• @media all 将此 CSS 应用于所有媒体类型。使用 @media 查询，你可以针对不同的媒体类型定义不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
• (min-width: 800px) 是包含媒体查询的表达式，如果浏览器的宽度大于或等于 800 像素，则会告诉浏览器只运用下列 CSS。
• (orientation: landscape) 指定输出设备中的页面可见区域宽度大于或等于高度

3.2 媒体类型

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等
speech	应用于屏幕阅读器等发声设备

3.2 逻辑操作符

• and 逻辑与

@media not all and (monochrome)

• or 逻辑或 。也可以使用,代替

@media screen and (color), print and (color)
@media screen and (color) or print and (color)

• not 逻辑非。如果查询语句中有,号，那么not只作用到,号的地方

@media not screen and (color), print and (color)
@media not screen and (color) or print and (color)

• only 仅仅，只有。主要用于防止老旧的浏览器，不支持带媒体属性的查询，而应用到给定的样式

media="only screen and (min-width: 401px) and (max-width: 600px)"

旧浏览器解析为media = "only"，则不会识别应用其样式。

media="screen and (min-width: 401px) and (max-width: 600px)"

旧浏览器解析为media="screen"，则会识别使用样式。

3.4 媒体属性

值	描述
width	定义输出设备中的页面可见区域宽度
height	定义输出设备中的页面可见区域高度
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率width/height
device-width	定义输出设备的屏幕可见宽度
device-height	定义输出设备的屏幕可见高度
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率，如16/9，4/3
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度，即是纵向还是横向
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0，如min-color: 16位，8位
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
grid	用来查询输出设备是否使用栅格或点阵
scan	定义电视类设备的扫描工序

以上属性除grid和scan都可以添加min-或max-前缀，表示最小或最大值

3.5 浏览器支持

表格中的数字表示支持 @media 规则的第一个浏览器的版本号。

Rule	Chrome	IE	Firefox	Safari	Opera
@media	21	9	3.5	4.0	9

4. 参考

• 使用 CSS 媒体查询创建响应式网站
• CSS3 @media查询
• CSS3 媒体查询 orientation
• 响应式 Web 设计 - 媒体查询