Media Query 使用方式
1 通过link标签
<link rel="stylesheet" href="file" media="logic media and (expression)"/>
2 通过@import
@import url('file') logic media and (expression);
3 在CSS文件中使用 @media
@media logic media and (expression) {
rules
}
/*以下两种方式等同*/
@media all and (expression) {rules}
@media (expression) {rules}
only 关键字
@media only media and (expression) {
rules
}
not关键字
@media not media and (expression) {
rules
}
Media特性
使用方法,包括带特性值与不带特性值:
@media (feature: value) {rules}
@media (feature) {rules)
特性1 宽度与高度
用法示例:
@media (width: 600px) {rules}
@media (max-width: 480px) {rules} /* 最大宽度不超过480px -- 最多 */
@media (min-width: 640px) {rules} /* 最小宽度不小于640px -- 至少 */
@media (height: value) {rules}
@media (max-height: value) {rules}
@media (min-height: value) {rules}
特性2 像素比
设备像素比(Device Pixel Ratio, DPR),其实际意义,已iPhone 5S为例,iPhone 5S的物理分辨率为640 × 1136,它的DPR为2,因此,它具有的320 × 568的CSS分辨率。
针对DPR,CSS3的Media Query中提供了一个名为resolution的Media特性。
@media media and (resolution: value) {rules }
resolution的取值是一个数值加上一个resolution单位:点每英寸(dots per inch, DPI),点每厘米(dots per centimeter,DPCM),点每像素(dots per pixel, DPPX)。
@media (resolution: 1.5ddpx) {rules}
@media (max-resolution: number) {rules}
@media (min-resolution: number) {rules}
注意:Chrome,Firefox以及IE 10+都支持resolution特性,但是IE没有实现DPPX的值,所以要兼容IE,需要使用DPI,将其乘以96,如
@media (resolution: 1.5dppx), (resolution: 144dpi) {rules}
特性3 设备宽度和高度
(max-/min-)device-width
(max-/min-)device-height
在实际应用中使用的比较少,更多的是使用下面的方式:
<meta name="viewport" content="width=device-width">
特性4 方向(横屏/竖屏)
@media (orientation: value) { rules }
value(取值)可以是landspace或者portrait。
特性5 屏幕宽高比
@media (aspect-ratio: horizontal/vertical) { rules }
@media (device-aspect-ratio: horizontal/vertical) { rules }
也可以加min-、max-前缀。
多个Media特性同时使用
1 and 模式
语法:
@media logic media and (expression) and (expression) { rules }
示例:
@media (max-device-aspect-ratio: 15/10) and (max-width: 800px) { ... }
2 or 模式
语法:
@media logic media and (expression), logic media and (expression) { rules }
示例:
@media screen and (orientation: landscape), print and (orientation: portrait) { ... }