有没有 JavaScript 等价于使用 @media 查询的方法？

Question

我有这段代码：

@media screen and (max-width: 570px) {

    #header {
        .flex-wrap(wrap);
        .justify-content(center);

        #headerTitles {
            margin-top: 1rem;
        }

    }
}

@media screen and (min-width: 571px) and (max-width: 950px) {

    #header.authenticated {
        .flex-wrap(wrap);
        .justify-content(center);

        #headerTitles {
            margin-top: 2rem;
        }
    }

}

有没有一种方法可以使用JavaScript（而不是jQuery）来动态添加或删除类到<div>元素中，以表示两种不同的大小，然后将其重写为类似于以下内容：

.small #headerTitles { margin-top: 1rem; }
.large #headerTitles { margin-top: 2rem; }

如果这个方法可行，那么有人可以评论一下是否使用JavaScript是更好的方法吗？

- Samantha J T Star

---

是的，你可以使用jQuery的addClass()方法；-) - Loenix

抱歉，我正在寻找一种使用JavaScript（而不是jQuery）的方法来完成这个任务。谢谢。 - Samantha J T Star

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Derek 朕會功夫

Answer 1

你可以在JavaScript中使用window.matchMedia()进行媒体查询。

例如：

var mq = window.matchMedia( "(max-width: 570px)" );
if (mq.matches) {
    // window width is at less than 570px
}
else {
    // window width is greater than 570px
}

请参考以下链接以更好地理解。

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia http://www.sitepoint.com/javascript-media-queries/

针对评论更新

请参考plunker链接: "http://plnkr.co/edit/wAKFEFz0NU6ZaEmywlgc?p=preview"

为更好的理解，请查看: "http://www.javascriptkit.com/javatutors/matchmediamultiple.shtml"

有关Web浏览器支持信息: "https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/"

- sahil gupta

---

我有点困惑。你能举个例子吗？比如说当窗口小于500px时，<div>的宽度设置为100px，当窗口小于600px时，<div>的宽度设置为150px。这样做能否动态地改变<div>的宽度，随着我调整窗口大小而改变？另外，这种方法在所有现代浏览器上都适用吗？ - Samantha J T Star

@SamanthaJ：已更新答案！！ - sahil gupta