對(duì)css的媒體查詢(xún)整理了相關(guān)內(nèi)容：

媒體查詢(xún)

從 CSS 版本 2 開(kāi)始，就可以通過(guò)媒體類(lèi)型在 CSS 中獲得媒體支持。如果您曾經(jīng)使用過(guò)打印樣式表装哆，那么您可能已經(jīng)使用過(guò)媒體類(lèi)型汉买。清單 1 展示了一個(gè)示例吝秕。

清單 1. 使用媒體類(lèi)型

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在清單 1 中土涝，media 屬性定義了應(yīng)該用于指定每種媒體類(lèi)型的樣式表：
screen 適用于計(jì)算機(jī)彩色屏幕砌梆。
print 適用于打印預(yù)覽模式下查看的內(nèi)容或者打印機(jī)打印的內(nèi)容非区。

作為 CSS v3 規(guī)范的一部分瓜挽，可以擴(kuò)展媒體類(lèi)型函數(shù)，并允許在樣式表中使用更精確的顯示規(guī)則征绸。媒體查詢(xún) 是評(píng)估 True 或 False 的一種表達(dá)久橙。如果為 True，則繼續(xù)使用樣式表管怠。如果為 False淆衷，則不能使用樣式表。這種簡(jiǎn)單邏輯通過(guò)表達(dá)式變得更加強(qiáng)大渤弛，使您能夠更靈活地對(duì)特定的設(shè)計(jì)場(chǎng)景使用自定義的顯示規(guī)則祝拯。

媒體查詢(xún)包含一個(gè)媒體類(lèi)型，后跟一個(gè)或多個(gè)檢查特定條件（如最小的屏幕寬度）的表達(dá)式她肯。樣式表中的媒體查詢(xún)看起來(lái)如清單 2 中的示例所示佳头。

清單 2. 媒體查詢(xún)規(guī)則

@media all and (min-width: 800px) { ... }

根據(jù)清單 2 中的標(biāo)記，所有最小水平屏幕寬度為 800 像素的屏幕（屏幕和打印等）都應(yīng)使用如下 CSS 規(guī)則晴氨。該規(guī)則在示例中省略號(hào)所在的地方康嘉。對(duì)于該媒體查詢(xún)：
@media all 是媒體類(lèi)型，也就是說(shuō)籽前，將此 CSS 應(yīng)用于所有媒體類(lèi)型亭珍。
(min-width:800px) 是包含媒體查詢(xún)的表達(dá)式，如果瀏覽器的最小寬度為 800 像素枝哄，則會(huì)告訴瀏覽器只運(yùn)用下列 CSS肄梨。

請(qǐng)注意，在清單 2 中挠锥，可以省略關(guān)鍵詞 all 和 and众羡。在將某個(gè)媒體查詢(xún)應(yīng)用于所有媒體類(lèi)型時(shí)，會(huì)省略 all蓖租。后面的 and 也是可選的粱侣。使用簡(jiǎn)寫(xiě)語(yǔ)法重新編寫(xiě)媒體查詢(xún)辆毡，如清單 3 所示。

清單 3. 簡(jiǎn)寫(xiě)語(yǔ)法

@media (min-width:800px) { ... }

媒體查詢(xún)也可以包含復(fù)雜表達(dá)式甜害。例如，如果您想要?jiǎng)?chuàng)建一個(gè)僅在最小寬度為 800 像素且最大寬度為 1200 像素時(shí)應(yīng)用的樣式球昨，則需要按照清單 4 中的規(guī)則來(lái)做尔店。

清單 4. 復(fù)雜表達(dá)式

@media (min-width:800px) and (max-width:1200px) { ... }

在您的表達(dá)式中，您可以根據(jù)自己的喜好使用任意數(shù)量的 and 條件主慰。如果您想要增加其他條件來(lái)檢查特定的屏幕方向嚣州，只需添加另一個(gè) and 關(guān)鍵詞，后跟 orientation 媒體查詢(xún)共螺，如清單 5 所示该肴。

清單 5. and 條件

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

清單 5 中的媒體查詢(xún)僅在寬度為 800 到 1200 像素且方向是縱向時(shí)才能激活。（通常藐不，方向僅對(duì)能夠輕易轉(zhuǎn)換縱橫模式的智能手機(jī)和平板電腦上是有意義的匀哄。）如果其中一個(gè)條件為 False，則無(wú)法應(yīng)用媒體查詢(xún)規(guī)則雏蛮。

and 關(guān)鍵詞的反義詞是 or 關(guān)鍵詞涎嚼。和 and 一樣，這些條件組合在一起會(huì)構(gòu)成復(fù)雜表達(dá)式挑秉。如果其中有一個(gè)條件為 True法梯，那么整個(gè)表達(dá)式或分離的兩個(gè)條件都會(huì)為 True，如清單 6 所示犀概。

清單 6. or 關(guān)鍵詞

@media (min-width:800px) or (orientation:portrait) { ... }

如果寬度至少是 800 像素或方向是縱向的立哑，則會(huì)應(yīng)用該規(guī)則。

另一個(gè)保存在詞庫(kù)中的媒體查詢(xún)關(guān)鍵詞是 not姻灶。位于媒體查詢(xún)的開(kāi)始處，not 會(huì)忽略結(jié)果木蹬。換句話(huà)說(shuō)至耻，如果該查詢(xún)本來(lái)在沒(méi)有 not 關(guān)鍵詞的情況下為 true，那么現(xiàn)在它將為 false镊叁。清單 7 展示一個(gè)示例尘颓。

清單 7. 使用 not

@media (not min-width:800px) { ... }

僅從英文意思上理解，清單 7 中代碼的表示：當(dāng)最小寬度不是 800 像素時(shí)晦譬，會(huì)應(yīng)用下列 CSS 規(guī)則疤苹。這些示例只是將像素作為媒體查詢(xún)中的測(cè)量單位，但是測(cè)量單位并不僅限于像素敛腌。您可以使用任何有效的 CSS 測(cè)量單位卧土，比如厘米 (cm)惫皱、英寸 (in)、毫米 (mm) 等尤莺。

有用的媒體特性

媒體很多特性旅敷，比如寬度、顏色和網(wǎng)格颤霎，您可以在媒體查詢(xún)中使用它們媳谁。對(duì)每個(gè)可能的媒體特性進(jìn)行描述不在本文討論范圍內(nèi)。關(guān)于媒體查詢(xún)的文檔 The World Wide Web Consortium's (W3C) 提供了這方面的一個(gè)完整清單友酱。（請(qǐng)參閱 參考資料）晴音。 

要設(shè)計(jì)響應(yīng)式網(wǎng)站，只需要了解一些媒體特性：方向缔杉、寬度和高度锤躁。作為一個(gè)簡(jiǎn)單媒體特性，方向的值可以是 portrait 或 landscape或详。這些值適用于持有手機(jī)或平板電腦的用戶(hù)系羞，使您可以根據(jù)兩個(gè)形狀因素來(lái)優(yōu)化內(nèi)容。當(dāng)高度大于長(zhǎng)度時(shí)霸琴，則認(rèn)為屏幕是縱向模式觉啊，當(dāng)寬度大于高度時(shí)，則認(rèn)為屏幕是橫向模式沈贝。清單 8 顯示了一個(gè)使用 orientation 媒體模式查詢(xún)的示例杠人。

清單 8. orientation 媒體查詢(xún)

@media (orientation:portrait) { ... }

高度和寬度行為十分相似，都支持以 min- 和 max- 為前綴宋下。清單 9 展示了一個(gè)有效的媒體查詢(xún)嗡善。

清單 9. 高度和寬度媒體查詢(xún)

@media (min-width:800px) and (min-height:400px) { ... }

如果沒(méi)有 min- 或 max- 前綴，您還可以使用 width 和 height 媒體特性学歧，如清單 10 所示罩引。

清單 10. 不帶 min- 和 max- 前綴

@media (width:800px) and (height:400px) { ... }

當(dāng)屏幕正好是 800 像素寬、400 像素高時(shí)枝笨，可以使用清單 10 中的媒體查詢(xún)≡恚現(xiàn)實(shí)中，像這樣的媒體查詢(xún)可能過(guò)于具體而不太有用横浑。檢測(cè)精確維度是大多數(shù)網(wǎng)站訪問(wèn)者都不可能遇到的一個(gè)場(chǎng)景剔桨。通常情況下，響應(yīng)式設(shè)計(jì)會(huì)使用范圍來(lái)執(zhí)行屏幕檢測(cè)徙融。

作為媒體查詢(xún)大小范圍的后續(xù)內(nèi)容洒缀，下一節(jié)將討論一些常見(jiàn)的媒體查詢(xún)，在設(shè)計(jì)一個(gè)響應(yīng)式網(wǎng)站時(shí)，您可能會(huì)發(fā)現(xiàn)它們非常有用树绩。

常見(jiàn)媒體查詢(xún)

因?yàn)?Apple 首次向市場(chǎng)推出了用戶(hù)智能手機(jī)和平板電腦產(chǎn)品萨脑，所以下列大多數(shù)媒體查詢(xún)都是基于這些型號(hào)的設(shè)備。

如果目標(biāo)是橫向模式智能手機(jī)饺饭，則使用： @media (min-width: 321px) { ... }

如果目標(biāo)是縱向模式智能手機(jī)渤早，則使用： @media (max-width: 320px) { ... }

如果目標(biāo)是橫向模式 Apple iPad，則使用： @media (orientation: landscape) { ... }

如果目標(biāo)是縱向模式 iPad瘫俊，則使用： @media (orientation: portrait) { ... }

您可能已經(jīng)注意到了蛛芥，iPad 上使用的是 orientation 媒體特性，而 width 用于 Apple iPhone 之上军援。主要是因?yàn)?iPhone 不支持 orientation 媒體特性。您必須使用 width 模擬這些方向斷點(diǎn)称勋。請(qǐng)參閱 參考資料胸哥，獲取有關(guān)常見(jiàn)媒體特性的更多信息。

瀏覽器支持

到現(xiàn)在為止赡鲜，您可能已經(jīng)相信 CSS 媒體查詢(xún)是一個(gè)強(qiáng)大的工具空厌，而且想知道哪些瀏覽器支持 CSS 媒體查詢(xún)。以下是這方面的好消息和壞消息银酬。
好消息是：大多數(shù)現(xiàn)代瀏覽器（包括智能手機(jī)上的瀏覽器）都支持 CSS 媒體查詢(xún)嘲更。
壞消息是：最近，來(lái)自 Redmond 的 Windows? Internet Explorer? 8 瀏覽器不支持媒體查詢(xún)揩瞪。
對(duì)于大多數(shù)專(zhuān)業(yè) Web 開(kāi)發(fā)人員來(lái)說(shuō)赋朦，這意味著您需要提供一個(gè)解決方案，以便在 Internet Explorer 中支持媒體查詢(xún)李破。


下列解決方案是一個(gè)名為 respond.js 的 JavaScript polyfill宠哄。

帶有 respond.js 的 Polyfill

Respond.js 是一個(gè)極小的增強(qiáng) Web 瀏覽器的 JavaScript 庫(kù)，使得原本不支持 CSS 媒體查詢(xún)的瀏覽器能夠支持它們嗤攻。該腳本循環(huán)遍歷頁(yè)面上的所有 CSS 引用毛嫉，并使用媒體查詢(xún)分析 CSS 規(guī)則。然后妇菱，該腳本會(huì)監(jiān)控瀏覽器寬度變化承粤，添加或刪除與 CSS 中媒體查詢(xún)匹配的樣式。最終結(jié)果是闯团，能夠在原本不支持的瀏覽器上運(yùn)行媒體查詢(xún)辛臊。

由于這是一個(gè)基于 JavaScript 的解決方案，所以瀏覽器需要支持 JavaScript房交，以便運(yùn)行腳本浪讳。該腳本只支持創(chuàng)建響應(yīng)式設(shè)計(jì)所需的最小和最大 width 媒體查詢(xún)。這并不是適用于所有可能 CSS 媒體查詢(xún)的一個(gè)替代涌萤。在 參考資料 部分淹遵，可以閱讀關(guān)于該腳本特性和局限性的更多信息口猜。

Respond.js 是您可以選擇的諸多可用開(kāi)源媒體查詢(xún) polyfills 之一。如果您覺(jué)得 respond.js 無(wú)法滿(mǎn)足您的需求透揣，在進(jìn)行一個(gè)小小的研究之后济炎，您就會(huì)發(fā)現(xiàn)幾個(gè)替代方案。