摘要：媒體查詢，添加自，允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪，而不必改變內容本身。而且瀏覽器也不會根據媒體查詢來動態的加載樣式，它只是一股腦的將所有的樣式引入。

媒體查詢(Media Queries)早在在css2時代就存在,經過css3的洗禮后變得更加強大bootstrap的響應式特性就是從此而來的.

簡單的來講媒體查詢是一種用于修飾css何時起作用的語法.

Media Queries 的引入，其作用就是允許添加表達式用以確定媒體的環境情況，以此來應用不同的樣式表。換句話說，其允許我們在不改變內容的情況下，改變頁面的布局以精確適應不同的設備。(1)

既然媒體查詢是用于控制樣式的,而樣式的使用無外乎如下幾種規則:

使用link引入

使用style標簽

使用style屬性

使用@import引入

而顯式的使用媒體查詢聲明樣式我們有如下三種方法:

使用link引入時使用media屬性

使用style標簽時添加media屬性

在樣式中使用條件規則組

我們先來看看link的使用方式:

link標簽使用媒體查詢后基本的樣子如下(1):

一旦使用了媒體查詢修飾link標簽后,就意味著符合媒體查詢后這個樣式就會被啟用,同樣的規則適用于style標簽.

那么對于上面的那一句media="screen and (min-width: 400px)"就可以解釋為:
當屏幕的寬度大于等于400px的時候應用這條樣式規則.

上面的例子中我們可以看到多出了一個media屬性,而media中內容就是媒體查詢的語法,可以被如下解釋:

一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表范圍的表達式組成，例如寬度、高度和顏色。媒體查詢，添加自CSS3，允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪，而不必改變內容本身。(2)

看起來很復雜,但是實際上一個媒體查詢的聲明就分為以下三個部分:

媒體類型 - 形容設備

媒體特性(媒體特征/媒體功能) - 形容設備的狀態

邏輯操作符 - 連接多個規則

那么使用上方的例子來說media="screen and (min-width: 400px)"中screen就是媒體類型,
而后面的and被稱作邏輯操作符,
(min-width: 400px)則被稱作媒體特性.

max 指的是不大于，例如 max-width:1200px = 不大于1200px的時候使用該規則中的樣式

min 指的是不小于, 例如 min-width:1200px = 不小于1200px的時候使用規則中的樣式

上文說道媒體查詢在css2中就已經有了,所以有很多媒體類型是在css2時代提出的,其中就只有screen和all被廣泛的使用,有很多都被刪除掉了.

常使用的媒體類型css2制定

screen 主要適用于彩色的電腦屏幕

all 適用于所有設備 (媒體類型默認值)

不常使用的媒體類型

print

speech

css2.1被廢棄掉的媒體類型(3)

tty

tv

projection

handheld

braille

embossed

aura

媒體特性一覽:

https://developer.mozilla.org...

大家可以運行一下這個例子來感受一下:

在這個例子中屏幕寬度大于400像素的時候body的背景顏色是黑色,但是一旦低于400像素后就成為了青綠色.

一個媒體查詢聲明中可以由多個媒體查詢組成(使用逗號分割),一個多帶帶的規則是由如下的格式組成的:

也就是說一個媒體查詢中可以存在多條規則,對于一個規則需要一個媒體類型(默認all)和n個媒體特性(可選),他們之間的連接使用邏輯操作符來連接.

當不填寫媒體類型對應的默認規則:

(max-width:400px) = all and (max-width:400px)

(max-width:400px) and (min-width:200px) = all and (max-width:400px) and (min-width:200px)

(max-width:400px) , (min-width:200px) = all and (max-width:400px) , all and (min-width:200px)

上面的例子的媒體查詢有如下內容screen and (width: 400px)如果你看過媒體特性一覽表就會發現min-這個內容是沒有提到的.

大部分媒體特性都是有前綴的,媒體特性前綴主要用于約束媒體特性的作用范圍.

max-xxx 小于指定的最大值返回true

min-xxx 大于指定的最小值返回true

所謂的邏輯操作符說白了就是編程中的邏輯操作符,用于連接多個媒體特性表達式.

顯示的邏輯操作符一共有兩個:

not 對于匹配到的媒體查詢取反

and 只有連接的兩個規則都成立的時候才返回true

注意:默認使用逗號分割的多個媒體查詢就是or的寫法,也就是說逗號就相當于or操作符

特殊的有一個:

only 不支持更加高級的媒體類型的瀏覽器檢測到only修飾的時候就會拋棄這個規則

實際使用中然并卵的功能

例子1:

screen and (min-width: 400px)

寬度大于400像素的設備使用這個樣式.

例子2:

(min-width: 700px) and (orientation: landscape)

寬度大于700像素且屏幕為橫屏的時候使用這個樣式.

例子3:

handheld and (max-width:20em), screen and (max-width:30em)

表示此CSS被應用于寬度小于20em的手持，或者寬度小于30em的屏幕.

所謂的條件規則組就是值媒體的聲明不在link標簽和style標簽上,而是在css代碼中,利用條件規則組我們可以將一塊css代碼在符合媒體查詢的時候應用.

使用方式(BootStrap中的樣式代碼)

@media (min-width:768px) {
    .lead {
        font-size: 21px
    }
}

在這個例子中:

在style標簽上聲明的屬性和在內部的條件規則組媒體查詢設計的一致,但是內部的條件規則組覆蓋掉了外部style上的媒體查詢.

可以看到他們實際上它們之間沒有優先級,只有先后執行的順序,后執行的規則會覆蓋掉前面的規則.

考慮如下含有媒體查詢的 css 樣式：

body {
  background-color: grey;
}

@media screen and (max-width:960px) {
  body {
  background-color: red;
  }
}
@media screen and (max-width:768px) {
  body {
  background-color: orange;
  }
}
@media screen and (max-width:550px) {
  body {
  background-color: yellow;
  }
}

@media screen and (max-width:320px) {
  body {
  background-color: green;
  }
}

這些媒體查詢的效果就是當頁面寬度超過 960px 的時候顯示灰色，隨著屏幕寬度的減小樣式隨之改變，使用適合當前頁面最大的媒體查詢。

默認沒有媒體查詢的樣式就相當于設置了 max-width:+∞ 雖然實際的媒體查詢中沒有無限大這個屬性。

媒體查詢從高到低的排列實際上是符合 css 設計的，即：

一個元素匹配多個樣式, 只有最后一個樣式會被應用到元素身上, 或者說它覆蓋了前面的符合條件的樣式.

如果頁面寬度為 300px 則 max-width:320px 可以使用，根據規則 max-width:550px 也是符合查詢條件的，之所以頁面在 300px 寬度的時候沒有匹配到 max-width:550px 是因為同樣符合匹配條件的 max-width:320px 更加靠后。

如果沒有使用媒體查詢的樣式放置到樣式最后，無論頁面如何縮放 body 始終是灰色，因為它匹配所有的寬度的同時還覆蓋了前面的所有含有媒體查詢的條件。

所以在 css 中使用媒體查詢的優先級就是：

沒有使用查詢的放在最前面，含有媒體查詢的樣式從高到低降序排列

將上例中的內容進行修改，轉為 link 標簽，變成如下內容：

實際上這種方式的作用效果和在 css 書寫的沒有區別，因為 css 規則的最終應用就是 HTML 中的書寫的順序，而這個順序和 css 中一致所以效果也就一致了。

不過使用這種方式會造成瀏覽器加載多個 css 文件，這會增加請求負擔。

而且瀏覽器也不會根據媒體查詢來動態的加載樣式，它只是一股腦的將所有的樣式引入。

(1)

http://www.swordair.com/blog/...

(2)

https://developer.mozilla.org...

(3)

https://developer.mozilla.org...
https://developer.mozilla.org...
https://www.zhangxinxu.com/wo...

更多的詳細的例子:

http://www.cnblogs.com/lguow/...

使用媒體查詢注意的常見錯誤:

https://blog.csdn.net/qq_3755...

電腦分辨率對應的媒體查詢:

https://blog.csdn.net/happyde...

在寫例子的時候我使用到了兩個瀏覽器最新的firefox和最新的chrome,有趣的事情是二者在style標簽上使用media屬性表現不同.

firefox中不寫也是正常運行,但是chrome就不可以.