CSS Media Query

一、媒体类型与特性

1、媒体类型

媒体类型描述设备的大体类别，除了使用not或only操作符之外，媒体类型是可选的，默认为所有类型设备。

• all

适用于所有设备

• print

适用于在打印预览模式下在屏幕上看到的分页材料和文档

• screen

主要适用于屏幕

• speech

适用于语音合成器

2、媒体特性

媒体特性描述了用户代理、输出设备或环境的特殊特性。媒体特性表达式测试这些特性是否存在或值是否满足条件，而且完全是可选的。每个媒体特性表达式必须用圆括号包围，大多数媒体特性支持min-或max-前缀，表示”最小…“或”最大…“。

部分媒体特性列举如下：

• aspect-ratio

视口的宽高比，该值包含两个以/分隔的正整数，表示水平像素数与垂直像素数的比例。

为宽高比大于1:1的设备应用样式：

@media screen and (min-aspect-ratio: 1/1) {...}

• width

视口(输出设备的渲染区域)的宽度。

为宽度在500px到800px之间的屏幕应用样式：

@media screen and (min-width: 500px) and (max-width: 800px) {...}

• height

视口(输出设备的渲染区域)的高度。

• device-aspect-ratio(已过时)

输出设备的宽高比，值与aspect-ratio的值类似。

为设备宽高比为16:9或16:10的设备应用样式：

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {...}

• device-width(已过时)

输出设备的宽度。

为最大宽度为800px的设备应用样式：

<link rel="stylesheet" media="screen and (max-device-width: 800px)" href="style.css"/>

• device-height(已过时)

输出设备的高度。

• orientation

设备的方向，宽度大于高度时为横屏(landscape)，高度大于宽度时为竖屏(portrait)。

为竖屏设备应用样式：

@media alll and (orientation: portrait) {...}

• resolution

输出设备的分辨率(像素密度)，可以用每英寸(dpi)或每厘米(dpcm)的点数来表示。

为分辨率为96dpi的设备应用样式：

@media screen and (resolution: 96dpi) {...}

• color

指定输出设备每个颜色单元的比特数，如果设备不是彩色，则值为0。

向所有能显示颜色的设备应用样式：

@media all and (color) {...}

向每个颜色单元至少有4个比特的设备应用样式：

@media all and (min-color: 4) {...}

• monochrome

黑白(灰度)设备中每个像素的比特数，如果不是黑白设备，则值为0。

为所有黑白设备应用样式：

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

• grid

判断输出设备是网格还是位图设备。如果设备是基于网格的，则值为1，否则为0。

• hover

测试用户的主输入机制是否可以悬停在元素上。取值为none或hover。

二、语法

1、简介

媒体查询由一个可选的媒体类型(默认值为all)和零个或多个媒体特性表达式组成，最终会被解析为true或false。媒体查询是大小写不敏感的，如果包含未知媒本类型或设备上没有对应的媒体特性时，查询通常返回false。

@media print {...}
@media screen, print {...}

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

@media speech and (aspect-ratio: 11/5) {...}
@media screen and (min-width: 30em) and (orientation: landscape) {...}
@media not screen and (color), print and (color) {...}

如果媒体查询中指定的媒体类型和当前显示文档的设备类型匹配，且所有的表达式的值都为true，则该媒体查询的结果为true。

• link元素中的媒体查询

<link rel="stylesheet" href="example.css" media="(max-width: 800px)"/>

• 样式表中的媒体查询

<style>
	@media (max-width: 800px) {
		.hidden{
			display: none;
		}
	}
</style>

2、逻辑操作符

可以使用逻辑操作符not、and和only等构建复杂的媒体查询。

• and

and操作符用于合并多个媒体特性表达式与媒体类型。

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

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

• ,

逗号用于将多个媒体查询组合到单个规则中，逗号分隔的列表中每个查询都是独立的，如果其中的任何一个媒体查询结果为true，则最终结果为true，类似于or逻辑。

为最小宽度为700像素或是横屏的屏幕应用样式：

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

• not

not操作用于取非。如果存在以逗号分隔的查询列表，则此操作符仅取消应用它的特定的那个查询，而不影响列表中其他的媒体查询。此操作符仅能应用在整个查询，而不能用来否定单个媒体查询表达式。

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

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

• only

only操作符仅用于对整个查询匹配时应用样式，可以防止旧浏览器不支持指定媒体特性的查询而应用到给定的样式，它对现代浏览器没有影响。

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

参考资料

• CSS媒体查询

• @media