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

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

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

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

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

使用link引入

使用style標(biāo)簽

使用style屬性

使用@import引入

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

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

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

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

我們先來(lái)看看link的使用方式:

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

一旦使用了媒體查詢(xún)修飾link標(biāo)簽后,就意味著符合媒體查詢(xún)后這個(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)容就是媒體查詢(xún)的語(yǔ)法,可以被如下解釋:

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

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

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

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

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

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

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

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

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

常使用的媒體類(lèi)型css2制定

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

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

不常使用的媒體類(lèi)型

print

speech

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

tty

tv

projection

handheld

braille

embossed

aura

媒體特性一覽:

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

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

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

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

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

當(dāng)不填寫(xiě)媒體類(lèi)型對(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)

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

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

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

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

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

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

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

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

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

特殊的有一個(gè):

only 不支持更加高級(jí)的媒體類(lèi)型的瀏覽器檢測(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代碼在符合媒體查詢(xún)的時(shí)候應(yīng)用.

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

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

在這個(gè)例子中:

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

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

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

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

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

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

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

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

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

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

沒(méi)有使用查詢(xún)的放在最前面，含有媒體查詢(xún)的樣式從高到低降序排列

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

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

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

而且瀏覽器也不會(huì)根據(jù)媒體查詢(xún)來(lái)動(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/...

使用媒體查詢(xún)注意的常見(jiàn)錯(cuò)誤:

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

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

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

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

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