Modernizr.mq 在普通 JS 中

Question

我试图在我的项目中摆脱 Modernizr，但我似乎无法理解或找到 .mq 函数的替代品。有人可以为我的问题解释或提供简单的解决方案吗？

Answer 1

根据Modernizr docs，mq 检查页面当前是否匹配您传递给它的媒体查询，例如if (Modernizr.mq('(min-width: 900px)')) 测试 window 是否至少 900px 宽。

在现代浏览器（IE10+，details here), you can use 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

Modernizr.mq 在普通 JS 中

Modernizr.mq in vanilla JS

javascript

dependencies

modernizr