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