Modernizr.mq在香草JS

Question

我想擺脫Modernizr在我的項目，但我似乎無法理解或找到.mq函數的替代品。有人可以解釋或提供我的問題的裸露解決方案嗎？

Answer 1

根據Modernizr docs,mq檢查頁面當前是否匹配您通過它的媒體查詢，例如， if (Modernizr.mq('(min-width: 900px)'))來測試窗口是否至少有900px寬。

在隱約現代的瀏覽器（IE10 +，details here）上，可以使用window.matchMedia來完成此操作。從該頁面實例：

if (window.matchMedia("(min-width: 400px)").matches) { 
    /* the viewport is at least 400 pixels wide */ 
} else { 
    /* the viewport is less than 400 pixels wide */ 
} 

Answer 2

Modernizr的是開源的 - 你可以看到正是它here。

在現代瀏覽器中，它幾乎總是隻是window.matchMedia