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