CSS知识点：媒体查询

概述

媒体查询可以根据用户所使用的的设备或显示器特性来自定义样式，从而实现适配不同终端的网页效果。

下面是一个例子：

@media screen and (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

语法

媒体查询包含：

• 媒体类型
  
  • all：适用于所有设备，默认值
  • print：打印
  • screen：显示器
  • speech：语音合成器（？）
• 媒体特性（media feature）
  每个媒体特性测试浏览器或设备的一个特定功能。
  大多数媒体属性可以带有“min-”或“max-”前缀来表达最低或最高。

以下是一些常用的媒体特性：

• width、height：可视区域的宽度和高度
• device-width：设备的宽度，一般用于移动端设备
• color 输出设备的每个颜色分量的位数

/*向所有能显示颜色的设备应用样式表：*/
@media all and (color) { ... }

• orientation 设备方向（横向landscape或纵向portrait）
• resolution 分辨率

媒体查询包含一个可选的媒体类型和零或多个满足CSS3规范的表达式来描述媒体特性。
这些表达式会被解析为true或false。如果媒体查询中指定的媒体类型匹配设备类型，并且所有媒体特性表达式的值都是true,那么该媒体查询的结果就是true。

逻辑操作符

操作符 not，and 和 only 可以用来构建复杂的媒体查询。

• and 操作符用来把多个媒体特性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。
• not 操作符用来对一条媒体查询的结果进行取反。
• only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。

若使用了 not 或 only 操作符，必须明确指定一个媒体类型。

• 你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。

and

and 关键字用于合并多个媒体特性，或合并媒体特性与媒体类型。

一个基本的媒体查询，即一个媒体特性与默认的 all媒体类型

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

如果你只想在横屏时应用这个，你可以使用 and 操作符合并媒体属性：

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

现在上面的媒体查询仅在可视区域宽度不小于700像素并在在横屏时有效。
如果，你仅想再电视媒体上应用，你可以使用 and 操作符合并媒体属性：

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

现在，上面媒体查询仅在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效。

逗号分隔列表

媒体查询中使用逗号分隔效果等同于 or 逻辑操作符。
当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。
逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

例如，如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：

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

如上文，如果是一个800像素宽的屏幕设备，媒体语句将会返回真，尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。
同样地，如果我是一个500像素宽的横屏手持设备，尽管第一部分因为宽度问题而不匹配，第二部分仍会成功，因此整个媒体查询返回真。

not

not 关键字应用于整个媒体查询，在媒体查询为假时返回真 。

@media not all and (monochrome) { ... }

/*等价于*/
@media not (all and (monochrome)) { ... }

/*而不是*/
@media (not all) and (monochrome) { ... }

在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。看下面的例子：

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

/*等价于*/
@media (not (screen and (color))), print and (color)

only

用来防止某些老旧的浏览器因为不支持媒体查询而将样式全部载入。
如果将媒体查询直接写入css样式文件，则无需使用only关键字。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

使用

媒体查询代码可以写在CSS样式文件中，也可以配合link元素和@import规则来引入不同的样式文件。

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

可视区域的meta标签

当写好媒体查询样式时，通过缩小浏览器窗口可以预览到效果，但是使用移动端设备测试的时候却会发现媒体查询不生效。

这是因为许多智能手机都使用一个比实际屏幕尺寸大很多的虚拟可视区域，这样做的目的是为了避免那些未针对手机进行优化的页面在小尺寸的实际可视区域下被挤压的变形。
当你在虚拟可视区域来浏览页面时，页面会缩小到刚好符合屏幕的尺寸，这使得所有东西都看起来很小，但它能保证界面布局看起来与使用一个桌面浏览器访问时看到的一样。

其实也就是你希望手机坦白地告诉你其屏幕的分辨率时，它们都假装自己的屏幕比实际的大。

幸运的是有个meta标签，其唯一的目的便是告诉手机浏览器你的网站针对它们进行了优化，并且可以让你自定义可视区域的尺寸和缩放级别。

如何工作

这个为手机而生的标签被称为“可视区域meta标签”，使用时需要将其name属性设置为viewport：

<meta name="viewport" content="">

在content属性内，可以填入任何用于处理可视区域的指令。

• width：可视区域的宽度，单位是像素。其取值可以是一个实际的数字或者关键词device-width
• height：可视区域的高度，单位是像素。其取值可以是一个实际的数字或者关键词device-height
• initial-scale：某个页面首次被显示时可视区域的缩放级别。取值为1.0将使页面以其实际尺寸显示，无任何缩放
• minimum-scale：可视区域的最小缩放级别。表示用户可以将页面缩小的程度。取值为1.0将禁止用户缩小至实际尺寸以下。
• maximum-scale：可视区域的最大缩放级别。表示用户可以将页面放大的程度。取值为1.0将禁止用户放大至实际尺寸以上。
• user-scalable：指定用户是否可以对页面进行缩放。设置yes为允许缩放，no则禁止缩放。

添加到页面中

<meta name="viewport" content="width=device-width">

将这个标签添加到页面中。
这将告诉手机浏览器你想将布局可视区域的尺寸设置为设备宽度、即屏幕的尺寸。
现在使用手机设备查看页面时就会发现媒体查询生效了。

然而，如果将iphone转到横向模式，页面仍会显示320而非480（老版iphone），这是因为无论在横向还是纵向，iphone所返回的设备宽度都是320px。
为了禁止它为了符合窗口尺寸而将界面放大，可以把maximum-scale设置为1.0来禁止浏览器（和用户）放大界面至实际尺寸以上。

<meta name="viewport" content="width=device-width,maximum-scale=1.0">