摘要：媒體查詢，添加自，允許內(nèi)容的呈現(xiàn)針對(duì)一個(gè)特定范圍的輸出設(shè)備而進(jìn)行裁剪，而不必改變內(nèi)容本身。而且瀏覽器也不會(huì)根據(jù)媒體查詢來動(dòng)態(tài)的加載樣式，它只是一股腦的將所有的樣式引入。

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

簡(jiǎn)單的來講媒體查詢是一種用于修飾css何時(shí)起作用的語法.

Media Queries 的引入，其作用就是允許添加表達(dá)式用以確定媒體的環(huán)境情況，以此來應(yīng)用不同的樣式表。換句話說，其允許我們?cè)诓桓淖儍?nèi)容的情況下，改變頁面的布局以精確適應(yīng)不同的設(shè)備。(1)

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

使用link引入

使用style標(biāo)簽

使用style屬性

使用@import引入

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

使用link引入時(shí)使用media屬性

使用style標(biāo)簽時(shí)添加media屬性

在樣式中使用條件規(guī)則組

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

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

一旦使用了媒體查詢修飾link標(biāo)簽后,就意味著符合媒體查詢后這個(gè)樣式就會(huì)被啟用,同樣的規(guī)則適用于style標(biāo)簽.

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

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

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

看起來很復(fù)雜,但是實(shí)際上一個(gè)媒體查詢的聲明就分為以下三個(gè)部分:

媒體類型 - 形容設(shè)備

媒體特性(媒體特征/媒體功能) - 形容設(shè)備的狀態(tài)

邏輯操作符 - 連接多個(gè)規(guī)則

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

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

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

上文說道媒體查詢?cè)赾ss2中就已經(jīng)有了,所以有很多媒體類型是在css2時(shí)代提出的,其中就只有screen和all被廣泛的使用,有很多都被刪除掉了.

常使用的媒體類型css2制定

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

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

不常使用的媒體類型

print

speech

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

tty

tv

projection

handheld

braille

embossed

aura

媒體特性一覽:

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

大家可以運(yùn)行一下這個(gè)例子來感受一下:

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

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

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

當(dāng)不填寫媒體類型對(duì)應(yīng)的默認(rèn)規(guī)則:

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

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

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

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

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

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

顯示的邏輯操作符一共有兩個(gè):

not 對(duì)于匹配到的媒體查詢?nèi)》?/p>

and 只有連接的兩個(gè)規(guī)則都成立的時(shí)候才返回true

注意:默認(rèn)使用逗號(hào)分割的多個(gè)媒體查詢就是or的寫法,也就是說逗號(hào)就相當(dāng)于or操作符

特殊的有一個(gè):

only 不支持更加高級(jí)的媒體類型的瀏覽器檢測(cè)到only修飾的時(shí)候就會(huì)拋棄這個(gè)規(guī)則

實(shí)際使用中然并卵的功能

例子1:

screen and (min-width: 400px)

寬度大于400像素的設(shè)備使用這個(gè)樣式.

例子2:

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

寬度大于700像素且屏幕為橫屏的時(shí)候使用這個(gè)樣式.

例子3:

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

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

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

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

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

在這個(gè)例子中:

在style標(biāo)簽上聲明的屬性和在內(nèi)部的條件規(guī)則組媒體查詢?cè)O(shè)計(jì)的一致,但是內(nèi)部的條件規(guī)則組覆蓋掉了外部style上的媒體查詢.

可以看到他們實(shí)際上它們之間沒有優(yōu)先級(jí),只有先后執(zhí)行的順序,后執(zhí)行的規(guī)則會(huì)覆蓋掉前面的規(guī)則.

考慮如下含有媒體查詢的 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;
  }
}

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

默認(rèn)沒有媒體查詢的樣式就相當(dāng)于設(shè)置了 max-width:+∞ 雖然實(shí)際的媒體查詢中沒有無限大這個(gè)屬性。

媒體查詢從高到低的排列實(shí)際上是符合 css 設(shè)計(jì)的，即：

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

如果頁面寬度為 300px 則 max-width:320px 可以使用，根據(jù)規(guī)則 max-width:550px 也是符合查詢條件的，之所以頁面在 300px 寬度的時(shí)候沒有匹配到 max-width:550px 是因?yàn)橥瑯臃掀ヅ錀l件的 max-width:320px 更加靠后。

如果沒有使用媒體查詢的樣式放置到樣式最后，無論頁面如何縮放 body 始終是灰色，因?yàn)樗ヅ渌械膶挾鹊耐瑫r(shí)還覆蓋了前面的所有含有媒體查詢的條件。

所以在 css 中使用媒體查詢的優(yōu)先級(jí)就是：

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

將上例中的內(nèi)容進(jìn)行修改，轉(zhuǎn)為 link 標(biāo)簽，變成如下內(nèi)容：

實(shí)際上這種方式的作用效果和在 css 書寫的沒有區(qū)別，因?yàn)?css 規(guī)則的最終應(yīng)用就是 HTML 中的書寫的順序，而這個(gè)順序和 css 中一致所以效果也就一致了。

不過使用這種方式會(huì)造成瀏覽器加載多個(gè) css 文件，這會(huì)增加請(qǐng)求負(fù)擔(dān)。

而且瀏覽器也不會(huì)根據(jù)媒體查詢來動(dòng)態(tài)的加載樣式，它只是一股腦的將所有的樣式引入。

(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...

更多的詳細(xì)的例子:

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

使用媒體查詢注意的常見錯(cuò)誤:

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

電腦分辨率對(duì)應(yīng)的媒體查詢:

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

在寫例子的時(shí)候我使用到了兩個(gè)瀏覽器最新的firefox和最新的chrome,有趣的事情是二者在style標(biāo)簽上使用media屬性表現(xiàn)不同.

firefox中不寫也是正常運(yùn)行,但是chrome就不可以.