css3 media query

CSS3 media querise

一個媒體查詢（media query）包含一個媒體類型（media type）和至少一個表達式，用媒體特性限制樣式表的做用範圍。

語法

媒體查詢包含一個媒體類型(media type)以及一個到多個測試媒體特性(media feature)的表達式，表達式和媒體類型將根據實際狀況計算的到true或者false。若是指定的媒體類型符合當前設備而且媒體特性表達式都爲真，那當前媒體查詢爲真。

當一個media query爲true時，對應的樣式表按照正常樣式規則生效。指定了media query的<link>中的樣式始終會下載。

除非使用了not或者only操做符，media type是可選的，默認值爲all。

邏輯運算符

and：用於結合多個媒體特性(media feature)到一個media query

只有全部feature表達式爲真且知足媒體類型時整個media query才爲真。

如下是一個簡單media query，用於檢測media type爲all時的一個media feature：

@media (min-width: 700px) {}

當咱們須要添加限制條件是，可使用and完成目的以下：

@media (min-width: 700px) and (orientation: landscape) {}

上面的media query只有在viewport大於700px而且width &bt; height時生效。此時若是須要限制媒體類型爲彩色電腦顯示器，可使用and添加media type以下：

@media screen and (min-width: 700px) and (orientation: landscape) {}

,逗號運算符：用於結合多個media query，任一media query爲true時應用樣式。

逗號運算符至關於邏輯運算符中的or。逗號分隔的每個media query都須要進行單獨求值，使用在某一個media query上的其餘運算符不會影響到其餘media query。

若是須要在大於700px寬的全部設備或者寬度大於高度的彩色電腦屏幕上應用樣式，可使用以下規則：

@media (min-width: 700px), screen and (orientation: landscape) {}

not：用於對整個media query結果取反,必須位於一個media query的開頭

在逗號分隔的多個media query中，not只對它做用的media query生效。not不能對單個media feature取反，只能做用於整個media query

例1：以下面的not將在最後求值：

@media not all and (monochrome) {}

等價於下面的query：

@media not (all and (monochrome)) {}

例2：下面的多個media query求值

@media not screen and (color), print and (color) {}

求值順序以下：

@media (not (screen and (color))), print and (color) {}

only：用於向早期瀏覽器隱藏媒體查詢，only必須位於media query的開頭

@media only screen and (min-width: 400px) and (max-width: 600px) {}

沒法識別媒體查詢的瀏覽器要求得到逗號分割的媒體類型列表，規範要求：它們應該在第一個不是連字符的非數字、字母以前截斷每一個值。因此上面的示例解釋爲：

@media only {}

由於沒有only這樣的媒體類型，因此樣式表被忽略。若是不加only，下面的示例

@media screen and (min-width: 400px) and (max-width: 600px) {}

被解析爲@media screen {}這樣一來即便瀏覽器不知道media query的真正含義，樣式也會應用於全部屏幕設備。不幸的是，IE6-8未能正確實現該規範。沒有將樣式應用到全部屏幕的設備，它將整個樣式表忽略掉。

儘管存在此行爲，若是但願向其餘不太經常使用的瀏覽器隱藏樣式，任然建議在媒體查詢前面添加only。

媒體類型（media type）

• all：適用與全部設備
• print：paged material and documents viewed on screen in print previe mode.
• screen: 彩色電腦顯示器
• speech：intended for speech synthesizers

注意：CSS2.1和CSS3 media query定義了tty, tv, projection, handheld, braille, embossed, aural這些media type，可是它們在media queries 4 中都廢棄了，因此不推薦使用了

媒體特性（media feature）

下面是一些media feature，不是所有

• width： viewport width
• height: viewport height
• aspect-ratio: viewport的寬高好比：16/9
• orientation: 寬度和高度的大小關係。。
• resolution: pixel density of the output device
• scan: scanning process of the output device
• grid: is the device a grid or bitmap
• color: number of bits per color component of the output device, or zero if the device isn't color
• color-index: number of entries in the output device's color lookup table, or zero if the device does not use such a table

media query經常使用方法

排他（exclusive）

爲確保在某一個條件下只有一個樣式表生效，將查詢條件嚴格劃分，以下面：

@media (max-width: 400px) {
    html {
        background: red;
    }
}

@media (min-width: 401px) and (max-width: 800px) {
    html {
        background: green;
    }
}

@media (min-width: 801px) {
    html {
        background: blue;
    }
}

覆蓋（overriding）

能夠對元素設置相同優先級，使用樣式順序，經過覆蓋，避免排他

@media (min-width: 400px) {
    html {
        background: red;
    }
}

@media (min-width: 600px) {
    html {
        background: green;
    }
}

@media (min-width: 800px) {
    html {
        background: blue;
    }
}

無線端優先（Mobile first）

默認樣式假設爲移動設備寬度，而後經過min-width控制擴展樣式

html {
    background: red;
}

@media (min-width: 600px) {
    html {
        background: green;
    }
}

PC優先（desktop first）

默認以寬屏進行樣式設置，經過max-width控制樣式覆蓋

html {
    background: red;
}

@media (max-width: 600px) {
    html {
        background: green;
    }
}

參考資料

• MDN:CSS media queries
• introducing media queries
• logic in meida queries