Modernizr.mq in vanilla 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