CSS 媒體查詢建立響應式網站

使用 CSS 媒體查詢建立響應式網站

 適用於全部屏幕大小的設計

固定寬度的靜態網站很快被靈活的響應式設計所取代，該設計能夠根據屏幕大小進行上擴和下擴。利用響應式設計，不管您採用什麼設備或屏幕來訪問網站，均可以呈現一個可用的界面。響應式設計能夠響應各類屏幕大小，所以也成爲了 「前瞻性」 的網站，屏幕將隨着新的智能手機和平板電腦的問世而快速演變。實現響應式設計的主要途徑是使用 CSS 媒體查詢。在本文中，咱們將瞭解如何將媒體查詢用於桌面網站、移動電話和平板電腦。

簡介

現今天天都有更多的手機和平板電腦問市。消費者可以擁有可想象到的各類規格和形狀的設備，可是網站開發人員卻面臨一個挑戰：如何使他們的網站在傳統瀏覽器、手機和平板電腦瀏覽器上有很好的效果，如何在各類大小的屏幕上提供一流的用戶體驗,答案是：採用響應式設計。響應式設計能夠隨所顯示的屏幕大小而改變。實現響應式設計的主要方法是使用 CSS 媒體查詢。

在本文中，將探索如何將媒體查詢用於桌面網站、移動電話和平板電腦。同時還將瞭解如何檢測媒體查詢支持，以及如何爲還沒有支持此項技術的瀏覽器提供可靠體驗。

先決條件

本文中的代碼樣例被設計爲可運行於支持 CSS 媒體查詢的網頁瀏覽器中，這些瀏覽器包括 Mozilla Firefox、Apple Safari、Google Chrome 和 Opera。請參閱 參考資料，獲取展現了桌面和移動瀏覽器中的 CSS3 媒體查詢的瀏覽器兼容性支持的完整列表。

 

響應式設計

響應式設計可根據所顯示的屏幕大小而改變, 它呈現的每一個屏幕看起來並不相同。按照可用的屏幕屬性，響應式設計提供了 UI 的最佳效果。

例如，若是網站佈局上有一個佔據 25% 的屏幕寬度的側邊欄，那麼該側邊欄在不一樣大小的屏幕上的呈現是不一樣的。該側邊欄在較大的桌面監控器上是寬屏的，在較小的 智能手機屏幕上是極其窄的。而在最高的或最小的屏幕上，側邊欄極可能再也不是可用的 UI 組件。

有了媒體查詢，您就能夠編寫 CSS，自動將設計更改成提供不一樣屏幕大小的最佳 UI 體驗。

 

媒體查詢

從 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 文件），爲什麼不嘗試一下使在平板電腦、手機或電子閱讀器上訪問您網站的訪客有良好的體驗

補充：

 @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ } @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */ } @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */ } @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */ }