css3 media query

fe_freelancer發表於2015-05-31
CSSS3

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;
    }
}

參考資料

相關文章