CSS3的media query學習攻略

 　　一個媒體查詢(media query)包含一個媒體類型(media type)和至少一個運算式，用媒體特性限制樣式表的作用範圍。

　　文法

　　媒體查詢包含一個媒體類型(media type)以及一個到多個測試媒體特性(media feature)的運算式，運算式和媒體類型將根據實際情況計算的到true或者false。如果指定的媒體類型符合當前裝置並且媒體特性運算式都為真，那當前媒體查詢為真。

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

　　除非使用了not或者only操作符，media type是可選的，預設值為all。

　　邏輯運算子

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

　　只有所有feature運算式為真且滿足媒體類型時整個media query才為真。

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

　　CSS Code複製內容到剪貼簿

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

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

　　CSS Code複製內容到剪貼簿

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

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

　　CSS Code複製內容到剪貼簿

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

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

　　逗號運算子相當於邏輯運算子中的or。逗號分隔的每一個media query都需要進行單獨求值，使用在某一個media query上的其他運算子不會影響到其他media query。

　　如果需要在大於700px寬的所有裝置或者寬度大於高度的彩色電腦螢幕上應用樣式，可以使用如下規則：

　　CSS Code複製內容到剪貼簿

　　@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將在最後求值：

　　CSS Code複製內容到剪貼簿

　　@media not all and (monochrome) {}

　　等價於下面的query：

　　CSS Code複製內容到剪貼簿

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

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

　　CSS Code複製內容到剪貼簿

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

　　求值順序如下：

　　CSS Code複製內容到剪貼簿

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

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

　　CSS Code複製內容到剪貼簿

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

　　無法識別媒體查詢的瀏覽器要求獲得逗號分割的媒體類型列表，規範要求：它們應該在第一個不是連字號的非數字、字母之前截斷每個值。所以上面的樣本解釋為：

　　CSS Code複製內容到剪貼簿

　　@media only {}

　　因為沒有only這樣的媒體類型，所以樣式表被忽略。如果不加only，下面的樣本

　　CSS Code複製內容到剪貼簿

　　@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)

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

　　CSS Code複製內容到剪貼簿

　　@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)

　　可以對元素設定相同優先順序，使用樣式順序，通過覆蓋，避免排他

　　CSS Code複製內容到剪貼簿

　　@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控制擴充樣式

　　CSS Code複製內容到剪貼簿

　　html {

　　background: red;

　　}

　　@media (min-width: 600px) {

　　html {

　　background: green;

　　}

　　}

　　PC優先(desktop first)

　　預設以寬屏進行樣式設定，通過max-width控制樣式覆蓋

　　CSS Code複製內容到剪貼簿

　　html {

　　background: red;

　　}

　　@media (max-width: 600px) {

　　html {

　　background: green;

　　}

　　}