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