Modernizr with Respond.js

我仔細評估了利用Modernizr和Respond.js進行響應式設計的最佳方法，並針對社區提出了一些問題。Modernizr with Respond.js

首先，我的理解是，將Modernizr與Respond.js捆綁在一起時，在IE8及以下版本中不需要其他編碼或測試來支持媒體查詢。換句話說，當Respond.js與Modernizr捆綁在一起時，我只需在我的源代碼中加載Modernizr即可使Respond.js處於活動狀態。正確？其次，你認爲這是在IE8及以下版本中支持媒體查詢的最有效方式嗎？實質上，我將包含比已經支持媒體查詢的瀏覽器所需更大的Modernizr腳本。如果對媒體查詢的測試失敗，分離這兩個腳本並僅加載Respond.js會不會更高效？

第三，如果我想分開這兩個腳本，您認爲如果需要加載Respond.js最好的方法是什麼？一種選擇是使用IE特定的條件註釋來加載響應。另一種選擇是使用yepnope和Modernizr來測試媒體查詢支持，並在需要時加載Respond。這會更有效和防錯。

最後，如果我選擇分開兩個腳本，並使用Modernizr的如果需要的話我也遇到以下兩種方法來加載迴應：

<script> 
     yepnope({ 
    test : Modernizr.mq('(only all)'), 
    nope : ['js/libs/respond.min.js'] 
}); 
</script>

<script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js"><\/script>')</script>

我發現，第二次崩潰IE8，但必須只需要重寫。你會推薦哪種技術？

感謝您的幫助。

來源

2011-11-25 dropseed

那裏有很好的問題！回覆：1，我建議用一種方式來解釋一個問題，這就解釋了爲什麼它不只是懶惰地檢查...... Re：2請注意「如果對媒體查詢的測試失敗，只加載Respond.js？」意味着不支持MQ的瀏覽器將支付額外的往返（用於respond.js腳本）;同時它爲每個訪問者支持瀏覽器節省1kb（縮小+ gzipped respond.js）。這是一個折衷。 – Nickolay

首先，我的理解是，在將Modernizr與Respond.js捆綁在一起時，在IE8及以下版本中，不需要其他編碼或測試來支持媒體查詢。換句話說，當Respond.js與Modernizr捆綁在一起時，我只需在我的源代碼中加載Modernizr即可使Respond.js處於活動狀態。正確？

那麼您至少需要一些CSS3媒體查詢才能開始。 Respond.js實質上只是不支持它們的瀏覽器的媒體查詢的JavaScript實現（例如，IE小於8）。只需確保在您的CSS3媒體查詢後（link），對Respond.js的引用就會出現。所以，是的，假設你有自定義版本或其他類型的與Modernizr捆綁在一起的Respond.js，並且在你的CSS3之後加載，你都很好。此外，Modernizr的需要一些更多的配置在你的HTML（link）

其次，你相信這是實現媒體查詢支持IE8及以下的最有效方法是什麼？實質上，我將包含比已經支持媒體查詢的瀏覽器所需更大的Modernizr腳本。如果對媒體查詢的測試失敗，分離這兩個腳本並僅加載Respond.js會不會更高效？

Modernizr doesn't come with support for browsers without media queries開箱即用。您需要將其添加到自定義構建中。所以，是的，我認爲總是包括迴應是很明智的。縮小了，庫只增加了3kb多一點，並且它包含在Modernizr文件中不會添加另一個GET請求。我會說只是把它留在那裏爲一切準備。

第三，我會用Modernizr方法。我喜歡使用新的東西，所有額外的JavaScript阻礙。

來源

2011-12-05 03:58:59 Andrew

請注意，由於性能原因，Modernizr不再捆綁Respond.js。看到這個評論https://github.com/Modernizr/Modernizr/issues/467#issuecomment-3468968。 – Andrew

Respond的新版本包含一些功能測試，因此您不需要Modernizr或Yepnope！

這裏的修訂： https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

包括window.matchMedia填充工具從外部主respond.js功能。這個polyfill的源代碼在這裏是https://github.com/paulirish/matchMedia.js，包括它的開箱即用會讓事情更容易保持更新，並允許通過Modernizr或其他方式對其進行更小的文件壓縮（如果您是，可以從Respond.js中刪除它）。

此外，你應該注意的是使用yepnope.js可能導致你看到媒體查詢樣式前非媒體查詢樣式分析和應用的延遲。建議您將respond.js放在頭文件中以儘可能避免這種情況，不過，將js文件保留在頁腳中也是很好的做法。

來源

2012-03-05 21:02:09 tkane2000

功能測試可能會在新的lib像tkane2000說... 只是想提一提，你可以通過Modernizr的可能就此別過：

<script> 
    Modernizr.load({ 
    test: Modernizr.mq('only all'), 
    nope: 'js/respond.min.js' 
    }); 
    </script>

原來的海報有我認爲無效的媒體查詢檢查「（只所有）'...不應該是基於我閱讀的一些東西的任何括號。一旦我移除了parens，respond.js似乎被適當地包含在內。

來源

2013-07-12 17:59:48 armyofda12mnkeys

優秀的答案。 –

Modernizr with Respond.js

回答

相關問題