Respond

回應.js

用於最小/最大寬度 CSS3 媒體查詢的快速輕量級填色（適用於 IE 6-8 及更多）

• 版權所有 2011：Scott Jehl，scottjehl.com

• 根據 MIT 許可證獲得許可。

該腳本的目標是提供一個快速且輕量級（3kb 縮小/1kb gzip 壓縮）的腳本，以便在不支援CSS3 媒體查詢的瀏覽器（特別是Internet Explorer 8 及更低版本）中啟用響應式Web 設計。它的編寫方式可能會修補對其他不支援的瀏覽器的支援（很快就會有更多資訊）。

如果您不熟悉響應式網頁設計的概念，您可以閱讀此處和此處

演示頁面（顏色變化以顯示媒體查詢正在運行）

使用說明

1. 使用最小/最大寬度媒體查詢製作 CSS，以適應從行動裝置（首先）一直到桌面的佈局

    @media screen and ( min-width : 480 px ){
        /** ...styles for 480px and up go here **/
    }

2. 在所有CSS之後引用respond.min.js腳本（1kb min/gzipped）（它運行得越早，IE用戶看不到非媒體內容的閃光的機會就越大）

3. 打開 Internet Explorer 並高興地揮舞拳頭

CDN/X 域設定

Respond.js 的工作原理是透過 AJAX 請求 CSS 的原始副本，因此，如果您將樣式表託管在 CDN（或子網域）上，則需要設定本機代理程式來為舊版 IE 瀏覽器請求 CSS。先前的版本建議使用已棄用的 x 域方法，但本地代理（出於效能和安全原因）比嘗試解決跨域限制更可取。

支持與注意事項

需要記住的一些注意事項：

• 這個腳本的焦點故意非常狹窄：只有最小寬度和最大寬度媒體查詢以及所有媒體類型（螢幕、列印等）都轉換為不支援的瀏覽器。我希望在檔案大小、維護和效能方面保持簡單，因此我有意限制對建置（行動優先）響應式設計所必需的查詢的支援。將來，我可能會稍微修改一下，添加一個用於修補其他媒體查詢功能的鉤子 - 請繼續關注！

• 本機支援 CSS3 媒體查詢的瀏覽器會盡快選擇不執行此腳本。在測試支援時，所有其他瀏覽器都會經過快速測試，以確定它們是否支援媒體查詢，然後再繼續執行腳本。該測試現在單獨包含在頂部，並使用此處找到的 window.matchMedia polyfill：https://github.com/paulirish/matchMedia.js。如果您已經透過 Modernizr 或其他方式包含此填充，請隨意刪除該部分。

• 該腳本不依賴其他腳本或框架（除了包含的 matchMedia polyfill），並且針對行動交付進行了最佳化（總檔案大小 min/gzip 約為 1kb）

• 正如你可能猜到的，這個實作在 CSS 解析規則方面相當愚蠢。這是一件好事，因為這使得它運行得非常快，但它的鬆散也可能導致意外的行為。例如：如果您將整個媒體查詢包含在打算停用其規則的註解中，您可能會發現這些規則最終會在不支援媒體查詢的瀏覽器中啟用。

• Respond.js 不會解析透過 @import 引用的 CSS，也無法處理樣式元素內的媒體查詢，因為無法重新要求解析這些樣式。

• 由於安全限制，某些瀏覽器可能不允許此腳本在 file:// url 上執行（因為它使用 xmlHttpRequest）。在網路伺服器上運行它。

• 如果對包含 MQ 特定樣式的 CSS 檔案的請求位於重定向後面，則 Respond.js 將默默失敗。 CSS 檔案應以 200 狀態回應。

• 目前，支援連結元素上的媒體屬性，但前提是連結的樣式表不包含媒體查詢。如果它確實包含查詢，則媒體屬性將被忽略，內部查詢將被正常解析。換句話說，CSS 中的 @media 語句優先。

• 據報道，如果 CSS 檔案使用位元組順序標記 (BOM) 以 UTF-8 編碼，則它們將無法在 IE7 或 IE8 中與 Respond.js 配合使用。在第 97 期中指出

• 警告：在媒體查詢中包含 @font-face 規則將導致 IE7 和 IE8 在載入期間掛起。要解決此問題，請將 @font-face 規則公開放置，作為其他媒體查詢的兄弟。

• 如果引用的樣式表超過 32 個，IE 會拋出錯誤Invalid procedure call or argument 。連接您的 CSS，問題就會消失。

• 不支援 Sass/SCSS 來源映射； @media -sass-debug-info將破壞respond.js。在第 148 期中指出

• Internet Explorer 9 支援css3 媒體查詢，但當包含媒體查詢的CSS 位於外部檔案時，不支援在框架內（這似乎是IE9 中的錯誤- 請參閱https://stackoverflow.com/questions/10316247/media -queries -在 ie9-iframe 內失敗）。如果您遇到此問題，請參閱此提交以獲取修復。 https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603

• 不支援嵌套媒體查詢

怎麼樣？

基本上，該腳本會循環訪問頁面中引用的 CSS，並對其內容運行一兩個正則表達式，以查找媒體查詢及其關聯的 CSS 區塊。在 Internet Explorer 中，樣式表的內容無法在預解析狀態下檢索（在 IE 8 中，這意味著其媒體查詢已從文本中刪除），因此 Respond.js 使用 Ajax 重新請求 CSS 文件，從那裡解析文本響應。請務必正確配置 CSS 檔案的緩存，以便此重新請求實際上不會發送到伺服器，而是訪問瀏覽器快取。

從那裡開始，每個媒體查詢區塊都透過樣式元素按順序附加到頭部，並且根據它們的最小/最大寬度與瀏覽器寬度的比較來啟用和停用這些樣式元素（讀取：從DOM 附加和刪除）。樣式元素上的媒體屬性將與 CSS 中的查詢相匹配，因此它可以是「螢幕」、「投影機」或您想要的任何內容。 CSS 中包含的任何相對路徑都將以其樣式表的 href 為前綴，因此圖像路徑將定向到正確的目的地

API 選項？

當然，有一對：

• respond.update() ：重新執行解析器（如果您為頁面新增了樣式表並且需要翻譯它，則很有幫助）
• respond.mediaQueriesSupported：如果瀏覽器本身支援媒體查詢，則設定為 true。
• respond.getEmValue() ：傳回 1 em 的像素值

此腳本的替代方案

這不是唯一的 CSS3 媒體查詢 polyfill 腳本；但它可能是最快的。

如果您正在尋找更強大的 CSS3 媒體查詢支持，您可以查看 https://code.google.com/p/css3-mediaqueries-js/。在測試中，我發現該腳本在渲染複雜的響應式設計（檔案大小和效能方面）時明顯緩慢，但它確實支援比該腳本更多的媒體查詢功能。向作者致敬！ :)