CSS media query

在 CSS2 中通过media type（媒体类型） 可以针对不同的设备设置不同的css样式。CSS3中的media query（媒体查询）是对 media type (媒体类型) 的一种增强。media query包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。media query可以看成是media type + CSS属性判断。通过media query可以构建适应各种屏幕尺寸的响应式布局。

在html中使用

<link media="screen and (max-width: 600px)" href="style.css">

在CSS中使用

@media screen and (max-width: 600px) {
	.container {
    	width: 100%;
    }
}

###媒体查询结构 通过以上可以看出媒体查询结构为media type + css表达式。media type可选，默认为all。css表达式必须使用圆括号，否则会报错。

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

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

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

###媒体查询支持的属性

参考：
CSS媒体查询 MDN
media type与media query 前端观察