CSS3: Media Queries

Media Queries是CSS3最具革命性的功能之一，它使得我們的網站能夠適配各種不同的設備。具體來說，開發人員可以使用Media Queries來識別設備環境，然後根據不同的設備環境應用不同的CSS規則，從而可以實現在不同的設備下，使用不同的佈局和皮膚。

語法

應用Media Queries有下麵三種方式：

1. 在引入css文件時使用 media 屬性

<link href="file.css" rel="stylesheet" media="logic media and (expression)">

2. 在css文件中使用 @import 指令

@import url('file.css') logic media and (expression);

3. 在css文件中使用 @media 指令

@media logic media and (expression) { rules }

當設備環境符合 logic media and (expression) 描述時，相應的css會生效或者被應用。第一種情況，整個file.css會生效；第二種情況，整個file.css會生效；第三種情況，大括弧內的所有css生效。

logic取值可以為not, only。

media代表媒體類型，最常使用的是screen, print，分別代表屏幕環境和列印環境，預設為all。

expression為設備特征的判斷，比如height, width等，下文會細說。

/* 在列印環境下，print.css生效 */
<link href="print.css" rel="stylesheet" media="print">

/* notprint.css作用於非列印環境下 */
@import url('notprint.css') not print;

/* 僅當在屏幕環境下並且視窗大小至少為1000px時，相應的css生效 */
@media only screen and (min-width: 1000px) {
    #example {
        background-color: red;
    }
}

/* 多條媒體查詢用,分隔 */
@media screen, print {
    #example {
        background-color: red;
    }
}

Media Features

上文中的expression即為Media Features表達式，用來描述設備的特征，語法為 @media (feature: value) { rules } 。feature代表特征名，value為其值，例子見上文。

下麵是Media Queries提供的所有Features，筆者已按實用性將其排序。

Width and Height

代表網頁渲染視窗的寬度和高度，即瀏覽器顯示區域的大小。

@media (width: 600px) { rules }

特征值同時支持max-和min-首碼，例如：

@media (max-width: 480px) { rules }
@media (min-width: 640px) { rules }

Pixel Ratio

像素比或解析度，這裡Pixel Ratio其實為Device Piexel Ratio(DPR)，意為設備物理像素點與邏輯像素點的比值。

比如iPhone 5S，物理解析度為640*1136，但其CSS解析度為320*568。也就是說，它的邏輯解析度為320*568，DPR為2，即兩個水平物理像素點和兩個垂直物理像素點，構成一個邏輯像素點。

圖1：DPR 1(左)，DPR 2(中)，DPR 3(右)

在大多數情況下，開發人員都不需要關心設備的物理解析度，文字和矢量圖都會表現良好，但是非矢量圖在高分屏下會出現嚴重的失真。一張普通的圖片，在DPR為2的設備上，就相當於圖片放大了2倍，用戶能明顯感覺模糊。

這時候，Media Queries就派上了用場，可以用此語法來判斷設備的DPR @media media and (resolution: value) { rules } 。

value的單位有：dots per inch(DPI), dots per centimeter(DPCM)，或者對我們更直觀的，dots per pixel(DPPX)。

@media (resolution: 1.5dppx) { rules }

@media (max-resolution: number) { rules }
@media (min-resolution: number) { rules }

 所以，在DPR=2的情況下，我們可以使用2倍解析度的圖片：

1 div { background-image: url('image.png'); }
2 @media (resolution: 2dppx) {
3     div { background-image: url('image-2x.png'); }
4 }

相容性

Chrome, Firefox, IE 10+支持 resolution Media Feature, 但IE不支持DPPX單位。為了相容IE，可以使用DPI作為單位(標準屏幕DPI為96)，例如：

@media (resolution: 1.5dppx), (resolution: 144dpi) { rules }

另外，Safari不支持 resolution ，使用 -webkit-device-pixel-ratio 代替：

@media (resolution: 1.5dppx), (resolution: 144dpi), (-webkit-device-pixel-ratio: 2) { rules }

Device Width and Height

這兩個屬性檢測的是設備屏幕的寬度和高度，實用價值不高。這裡的寬度和高度指的是設備的物理像素。

@media (device-width: number) { rules }
@media (device-height: number) { rules }

@media (max-device-width: number) { rules }
@media (max-device-height: number) { rules }

@media (min-device-width: number) { rules }
@media (min-device-height: number) { rules }

Orientation

設備朝向：landscape或portrait。當寬>高時，設備為landscape模式；反之，則為portrait模式。這個功能對手持設備比較有用。

@media (orientation: landscape) { rules }
@media (orientation: portrait) { rules }

Aspect Ratio

寬高比，例如16/9，16/10等。 aspect-ratio 表示瀏覽器的寬高比；而 device-aspect-ratio 表示設備的寬高比。

@media (aspect-ratio: horizontal/vertical) { rules }
@media (device-aspect-ratio: horizontal/vertical) { rules }

@media (min-aspect-ratio: horizontal/vertical) { rules }
@media (min-device-aspect-ratio: horizontal/vertical) { rules }

@media (max-aspect-ratio: horizontal/vertical) { rules }
@media (max-device-aspect-ratio: horizontal/vertical) { rules }

@media (min-device-aspect-ratio: 16/9) {...}

註意，iPhone在landscape和portrait模式中，會反饋相同的寬高比；而另外一些設備，會在不同Orientation下返回不同的寬高比。