CSS3 Media Queries 详解

媒体特性共13种，可以说是一个类似CSS属性的集合。但和CSS属性不同的是，媒体特性只接受单个的逻辑表达式作为其值，或者没有值。并且其中的大部分接受 min/max 的前缀，用来表示 大于等于/小于等于 的逻辑，以此避免使用 < 和 > 这些字符。

那么，回到刚才的那条Media Query，media="screen and (min-width: 400px)" 的意思就是当屏幕的宽度大于等于400px的时候，应用此条CSS。

一个 Media Query 包含一种媒体类型，如果媒体类型没有指定，那么就是默认类型all，比如：

代码：

一个 Media Query 包含0到多个表达式，表达式又包含0到多个关键字，以及一种媒体特性，比如：

代码：

逗号（，）被用来表示并列，表示或者。比如下面的例子表示此CSS被应用于宽度小于20em的手持，或者宽度小于30em的屏幕：

代码：

not 关键字用来排除符合表达式的设备，比如：

代码：