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 操作符。

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

属性Min/Max描述
color整数yes每种色彩的字节数
color-index整数yes色彩表中的色彩数
device-aspect-ratio整数/整数yes宽高比例
device-heightlengthyes设备屏幕的输出高度
device-widthlengthyes设备屏幕的输出宽度
grid整数no是否是基于格栅的设备
heightlengthyes渲染界面的高度
monochrome整数yes单色帧缓冲器中每像素字节
resolution分辨率(“dpi/dpcm”)yes分辨率
scanProgressive interlacednotv媒体类型的扫描方式
widthlengthyes渲染界面的宽度
orientationPortrait/landscapeno横屏或竖屏

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