響應式設計
響應式設計可(kě)根據所顯示的(de)屏幕大(dà)小而改變, 它呈現的(de)每個(gè)屏幕看起來(lái)并不相同。按照(zhào)可(kě)用(yòng)的(de)屏幕屬性，響應式設計提供了(le) UI 的(de)最佳效果。
例如，如果網站布局上有一個(gè)占據 25% 的(de)屏幕寬度的(de)側邊欄，那麽該側邊欄在不同大(dà)小的(de)屏幕上的(de)呈現是不同的(de)。該側邊欄在較大(dà)的(de)桌面監控器上是寬屏的(de)，在較小的(de) 智能手機屏幕上是極其窄的(de)。而在最高(gāo)的(de)或最小的(de)屏幕上，側邊欄很可(kě)能不再是可(kě)用(yòng)的(de) UI 組件。
有了(le)媒體查詢，您就可(kě)以編寫 CSS，自動将設計更改爲提供不同屏幕大(dà)小的(de)最佳 UI 體驗。
媒體查詢
從 CSS 版本 2 開始，就可(kě)以通(tōng)過媒體類型在 CSS 中獲得(de)媒體支持。如果您曾經使用(yòng)過打印樣式表，那麽您可(kě)能已經使用(yòng)過媒體類型。清單 1 展示了(le)一個(gè)示例。
1. 使用(yòng)媒體類型
在清單 1 中，media 屬性定義了(le)應該用(yòng)于指定每種媒體類型的(de)樣式表：
screen 适用(yòng)于計算(suàn)機彩色屏幕。
print 适用(yòng)于打印預覽模式下(xià)查看的(de)内容或者打印機打印的(de)内容。
作爲 CSS v3 規範的(de)一部分(fēn)，可(kě)以擴展媒體類型函數，并允許在樣式表中使用(yòng)更精确的(de)顯示規則。媒體查詢 是評估 True 或 False 的(de)一種表達。如果爲 True，則繼續使用(yòng)樣式表。如果爲 False，則不能使用(yòng)樣式表。這(zhè)種簡單邏輯通(tōng)過表達式變得(de)更加強大(dà)，使您能夠更靈活地對(duì)特定的(de)設計場(chǎng)景使用(yòng)自定義的(de)顯示規則。
媒體查詢包含一個(gè)媒體類型，後跟一個(gè)或多(duō)個(gè)檢查特定條件（如最小的(de)屏幕寬度）的(de)表達式。樣式表中的(de)媒體查詢看起來(lái)如清單 2 中的(de)示例所示。
2. 媒體查詢規則
@media all and (min-width: 800px) { ... }
根據清單 2 中的(de)标記，所有最小水(shuǐ)平屏幕寬度爲 800 像素的(de)屏幕（屏幕和(hé)打印等）都應使用(yòng)如下(xià) CSS 規則。該規則在示例中省略号所在的(de)地方。對(duì)于該媒體查詢：
@media all 是媒體類型，也(yě)就是說，将此 CSS 應用(yòng)于所有媒體類型。
(min-width:800px) 是包含媒體查詢的(de)表達式，如果浏覽器的(de)最小寬度爲 800 像素，則會告訴浏覽器隻運用(yòng)下(xià)列 CSS。
請注意，在清單 2 中，可(kě)以省略關鍵詞 all 和(hé) and。在将某個(gè)媒體查詢應用(yòng)于所有媒體類型時(shí)，會省略 all。後面的(de) and 也(yě)是可(kě)選的(de)。使用(yòng)簡寫語法重新編寫媒體查詢，如清單 3 所示。
3. 簡寫語法
@media (min-width:800px) { ... }
媒體查詢也(yě)可(kě)以包含複雜(zá)表達式。例如，如果您想要創建一個(gè)僅在最小寬度爲 800 像素且最大(dà)寬度爲 1200 像素時(shí)應用(yòng)的(de)樣式，則需要按照(zhào)清單 4 中的(de)規則來(lái)做(zuò)。
4. 複雜(zá)表達式
@media (min-width:800px) and (max-width:1200px) { ... }
在您的(de)表達式中，您可(kě)以根據自己的(de)喜好使用(yòng)任意數量的(de) and 條件。如果您想要增加其他(tā)條件來(lái)檢查特定的(de)屏幕方向，隻需添加另一個(gè) and 關鍵詞，後跟 orientation 媒體查詢，如清單 5 所示。
5. and 條件
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }
清單 5 中的(de)媒體查詢僅在寬度爲 800 到 1200 像素且方向是縱向時(shí)才能激活。（通(tōng)常，方向僅對(duì)能夠輕易轉換縱橫模式的(de)智能手機和(hé)平闆電腦(nǎo)上是有意義的(de)。）如果其中一個(gè)條件爲 False，則無法應用(yòng)媒體查詢規則。
and 關鍵詞的(de)反義詞是 or 關鍵詞。和(hé) and 一樣，這(zhè)些條件組合在一起會構成複雜(zá)表達式。如果其中有一個(gè)條件爲 True，那麽整個(gè)表達式或分(fēn)離的(de)兩個(gè)條件都會爲 True，如清單 6 所示。
6. or 關鍵詞
@media (min-width:800px) or (orientation:portrait) { ... }
如果寬度至少是 800 像素或方向是縱向的(de)，則會應用(yòng)該規則。
另一個(gè)保存在詞庫中的(de)媒體查詢關鍵詞是 not。位于媒體查詢的(de)開始處，not 會忽略結果。換句話(huà)說，如果該查詢本來(lái)在沒有 not 關鍵詞的(de)情況下(xià)爲 true，那麽現在它将爲 false。清單 7 展示一個(gè)示例。
7. 使用(yòng) not
@media (not min-width:800px) { ... }
僅從英文意思上理(lǐ)解，清單 7 中代碼的(de)表示：當最小寬度不是 800 像素時(shí)，會應用(yòng)下(xià)列 CSS 規則。這(zhè)些示例隻是将像素作爲媒體查詢中的(de)測量單位，但是測量單位并不僅限于像素。您可(kě)以使用(yòng)任何有效的(de) CSS 測量單位，比如厘米 (cm)、英寸 (in)、毫米 (mm) 等。
有用(yòng)的(de)媒體特性
媒體很多(duō)特性，比如寬度、顔色和(hé)網格，您可(kě)以在媒體查詢中使用(yòng)它們。對(duì)每個(gè)可(kě)能的(de)媒體特性進行描述不在本文討(tǎo)論範圍内。關于媒體查詢的(de)文檔 The World Wide Web Consortium's (W3C) 提供了(le)這(zhè)方面的(de)一個(gè)完整清單。（請參閱 參考資料）。
要設計響應式網站，隻需要了(le)解一些媒體特性：方向、寬度和(hé)高(gāo)度。作爲一個(gè)簡單媒體特性，方向的(de)值可(kě)以是 portrait 或 landscape。這(zhè)些值适用(yòng)于持有手機或平闆電腦(nǎo)的(de)用(yòng)戶，使您可(kě)以根據兩個(gè)形狀因素來(lái)優化(huà)内容。當高(gāo)度大(dà)于長(cháng)度時(shí)，則認爲屏幕是縱向模式，當寬度大(dà)于高(gāo)度時(shí)，則認爲屏幕是橫向模式。清單 8 顯示了(le)一個(gè)使用(yòng) orientation 媒體模式查詢的(de)示例。
8. orientation 媒體查詢
@media (orientation:portrait) { ... }
高(gāo)度和(hé)寬度行爲十分(fēn)相似，都支持以 min- 和(hé) max- 爲前綴。清單 9 展示了(le)一個(gè)有效的(de)媒體查詢。
9. 高(gāo)度和(hé)寬度媒體查詢
@media (min-width:800px) and (min-height:400px) { ... }
如果沒有 min- 或 max- 前綴，您還(hái)可(kě)以使用(yòng) width 和(hé) height 媒體特性，如清單 10 所示。
10. 不帶 min- 和(hé) max- 前綴
@media (width:800px) and (height:400px) { ... }
當屏幕正好是 800 像素寬、400 像素高(gāo)時(shí)，可(kě)以使用(yòng)清單 10 中的(de)媒體查詢。現實中，像這(zhè)樣的(de)媒體查詢可(kě)能過于具體而不太有用(yòng)。檢測精确維度是大(dà)多(duō)數網站訪問者都不可(kě)能遇到的(de)一個(gè)場(chǎng)景。通(tōng)常情況下(xià)，響應式設計會使用(yòng)範圍來(lái)執行屏幕檢測。
作爲媒體查詢大(dà)小範圍的(de)後續内容，下(xià)一節将討(tǎo)論一些常見的(de)媒體查詢，在設計一個(gè)響應式網站時(shí)，您可(kě)能會發現它們非常有用(yòng)。
常見媒體查詢
因爲 Apple 首次向市場(chǎng)推出了(le)用(yòng)戶智能手機和(hé)平闆電腦(nǎo)産品，所以下(xià)列大(dà)多(duō)數媒體查詢都是基于這(zhè)些型号的(de)設備。
如果目标是橫向模式智能手機，則使用(yòng)： @media (min-width: 321px) { ... }
如果目标是縱向模式智能手機，則使用(yòng)： @media (max-width: 320px) { ... }
如果目标是橫向模式 Apple iPad，則使用(yòng)： @media (orientation: landscape) { ... }
如果目标是縱向模式 iPad，則使用(yòng)： @media (orientation: portrait) { ... }
您可(kě)能已經注意到了(le)，iPad 上使用(yòng)的(de)是 orientation 媒體特性，而 width 用(yòng)于 Apple iPhone 之上。主要是因爲 iPhone 不支持 orientation 媒體特性。您必須使用(yòng) width 模拟這(zhè)些方向斷點。請參閱 參考資料，獲取有關常見媒體特性的(de)更多(duō)信息。
SASS 中的(de)媒體查詢
Ruby on Rails 中的(de)内置支持有助于推進 Syntactically Awesome Style Sheets (SASS) 的(de)盛行，使其在 Web 開發社區(qū)中迅速走強。關于 SASS 的(de)詳細討(tǎo)論已超出了(le)本文的(de)討(tǎo)論範圍，但我會在基于 SASS 的(de)樣式表中簡要介紹使用(yòng)媒體查詢的(de)基礎知識。請參閱 Resources，獲取有關 SASS 的(de)更多(duō)信息。
SASS 行爲中的(de)媒體查詢與普通(tōng) CSS 中的(de)完全相同，但有一個(gè)例外：它們可(kě)以嵌套在其他(tā) CSS 規則中。當一個(gè)媒體查詢嵌套在另一個(gè) CSS 規則中時(shí)，會将規則置于樣式表的(de)頂層，如清單 11 所示。
11. 嵌套的(de)媒體查詢
#header {
width: 400px;
@media (min-width: 800px) {
width: 100%;
}
}
11 中的(de)示例将編譯到清單 12 的(de)代碼中。
12. 編譯結果
#header {
width: 400px;
}
@media (min-width: 800px) {
#header {
width: 100%;
}
}
組織您的(de)媒體查詢
現在，我們已經了(le)解了(le)如何編寫媒體查詢，是時(shí)候考慮采用(yòng)以一種合乎邏輯的(de)、有組織的(de)方式将媒體查詢部署到您的(de) CSS 代碼中了(le)。确定如何組織媒體查詢很大(dà)程度上是一種個(gè)人(rén)偏好。這(zhè)一小節将探討(tǎo)兩種主要方法的(de)優點和(hé)缺點。
第一個(gè)方法是爲不同屏幕大(dà)小指定完全不同的(de)樣式表。優點是規則可(kě)以保存在獨立樣式表中，這(zhè)使得(de)顯示邏輯能夠清楚地劃分(fēn)出來(lái)，更便于團隊進行維護。另一個(gè)優勢是源代碼分(fēn)支之間的(de)合并變得(de)更爲容易。但優點同時(shí)也(yě)是缺點。如果要爲每個(gè)媒體查詢創建單獨的(de)樣式表，則無法将一個(gè)元素的(de)所有樣式表放在同一文件夾的(de)同一位置。當改變一個(gè) CSS 中的(de)一個(gè)元素時(shí)，需要創建多(duō)個(gè)位置進行查看，這(zhè)使得(de)網站 CSS 的(de)維護變得(de)更加困難。
第二個(gè)方法是在現有樣式表中使用(yòng)媒體查詢，該樣式表就在定義其餘元素樣式表的(de)位置的(de)旁邊。這(zhè)種方法的(de)優勢是可(kě)以将所有元素樣式保存在同一個(gè)位置。當在團隊模式下(xià)工作時(shí)，這(zhè)種做(zuò)法可(kě)以創建更多(duō)源代碼合并工作，但這(zhè)是所有基于團隊的(de)軟件開發都可(kě)以管理(lǐ)且常見的(de)一部分(fēn)。
沒有所謂正确或錯誤方法。您隻需選擇最适合您的(de)項目和(hé)團隊的(de)方法即可(kě)。
浏覽器支持
到現在爲止，您可(kě)能已經相信 CSS 媒體查詢是一個(gè)強大(dà)的(de)工具，而且想知道哪些浏覽器支持 CSS 媒體查詢。以下(xià)是這(zhè)方面的(de)好消息和(hé)壞消息。
好消息是：大(dà)多(duō)數現代浏覽器（包括智能手機上的(de)浏覽器）都支持 CSS 媒體查詢。
壞消息是：最近，來(lái)自 Redmond 的(de) Windows® Internet Explorer® 8 浏覽器不支持媒體查詢。
對(duì)于大(dà)多(duō)數專業 Web 開發人(rén)員(yuán)來(lái)說，這(zhè)意味著(zhe)您需要提供一個(gè)解決方案，以便在 Internet Explorer 中支持媒體查詢。
下(xià)列解決方案是一個(gè)名爲 respond.js 的(de) JavaScript polyfill。
帶有 respond.js 的(de) Polyfill
Respond.js 是一個(gè)極小的(de)增強 Web 浏覽器的(de) JavaScript 庫，使得(de)原本不支持 CSS 媒體查詢的(de)浏覽器能夠支持它們。該腳本循環遍曆頁面上的(de)所有 CSS 引用(yòng)，并使用(yòng)媒體查詢分(fēn)析 CSS 規則。然後，該腳本會監控浏覽器寬度變化(huà)，添加或删除與 CSS 中媒體查詢匹配的(de)樣式。最終結果是，能夠在原本不支持的(de)浏覽器上運行媒體查詢。
由于這(zhè)是一個(gè)基于 JavaScript 的(de)解決方案，所以浏覽器需要支持 JavaScript，以便運行腳本。該腳本隻支持創建響應式設計所需的(de)最小和(hé)最大(dà) width 媒體查詢。這(zhè)并不是适用(yòng)于所有可(kě)能 CSS 媒體查詢的(de)一個(gè)替代。在 參考資料 部分(fēn)，可(kě)以閱讀關于該腳本特性和(hé)局限性的(de)更多(duō)信息。
Respond.js 是您可(kě)以選擇的(de)諸多(duō)可(kě)用(yòng)開源媒體查詢 polyfills 之一。如果您覺得(de) respond.js 無法滿足您的(de)需求，在進行一個(gè)小小的(de)研究之後，您就會發現幾個(gè)替代方案。
結束語
有了(le) CSS 媒體查詢，您就可(kě)以輕松地将特定屏幕大(dà)小作爲目标，并創建一個(gè)可(kě)靠的(de)用(yòng)戶體驗，不管使用(yòng)何種浏覽器或設備來(lái)訪問您的(de)網站。這(zhè)些技術是響應式設計的(de)重中之重，響應式設計是一個(gè)新興移動 Web 設計和(hé)開發實踐。在您的(de)網站上嘗試使用(yòng)媒體查詢并不涉及實際成本（除了(le)隻是增強您的(de)現有 CSS 文件），爲何不嘗試一下(xià)使在平闆電腦(nǎo)、手機或電子閱讀器上訪問您網站的(de)訪客有良好的(de)體驗。
