CSS之Media Query

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) { ... }