javascript - 我可以使用 JavaScript 获取媒体查询使用的维度吗？

Question

例如这里是一个fiddle它显示了当宽度低于 200 像素时如何更改字体。

@media (max-width: 200px) {
  .test {
    font-size:40px;
  }
}

如果将 html 窗口向右移动以使其变小，您将看到它达到 200px b.c 的点。字体会改变。

如果有人可以向 fiddle 添加动态 div，以便将此值输出到窗口，这将是一个很酷的媒体查询测试脚本。

此外，如果 Web 上有关于媒体查询的 JavaScript 接口(interface)的良好引用。我希望有一个。我还没有找到它。

Answer 1

您可以将事件监听器添加到 window.matchMedia

if (matchMedia) {
    var mq = window.matchMedia("(max-width: 200px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {

    if (mq.matches) {
        console.log('matches')
    }

}

Demo