Javascript 使用媒体查询添加类或其他属性

我目前正在使用CSS媒体查询来定位一些小型/中型屏幕设备，如下所示：

@media screen and (min-device-width: 480px) {
  ...
}
@media screen and (min-device-width: 720px) {
  ...
}

这与预期的一样有效，我可以将样式应用于某些特定的选择器，但是。。我想知道的是，是否有一种方法可以基于媒体查询向选择器添加类或其他属性

我的想法的例子：

@media screen and (min-device-width: 480px) {
  body { addClass('body-iphone') }
}

---

有没有一种方法可以用CSS或者JavaScript来实现这一点呢？

看看conditionizr这可能就是你想要的。用于处理媒体查询的轻量级纯JavaScript库。看起来很酷

这不能用普通CSS来完成

看一看少说或粗鲁的话。它们的设计目的是使使用CSS更具动态性和灵活性

一旦你使用它们。你不能没有他们

---

如果要在某些分辨率上向主体添加现有类选择器

无礼 对于这一点也有帮助-即使启用了svg或其他功能，也可以检测

JavaScript解决方案

if (window.matchMedia("(min-device-width: 480px)").matches {
    // modify dom
}

---

-这听起来像是解决了你的问题issue@Daniel，几乎是的，但它只适用于所有设备（台式机也是），我想找到一种方法使用

min device width

来确保这不仅仅是一个小的13“那么，你还应该检查一下用户代理。这和我需要的东西很相似！我只是投票支持它，因为它可以在回调中做任何事情，使用媒体查询，并且对旧浏览器有回退。。我们还需要什么！如何在不使用javascript的情况下使用更少的/SASS将“body iphone”类添加到body标记中。。好吧，没关系，但你没有回答这个问题。这并没有将类添加到body标记，只是将现有类的css应用到body标记。@Bixi我从来没有说过可以使用样式将实际类添加到body节点。我的方法几乎是一样的。唯一真正的区别是javascript会向节点的类列表中添加一个实际的类，而事实并非如此。它只是应用了在大多数情况下应该足够的样式。

if (window.matchMedia("(min-device-width: 480px)").matches {
    // modify dom
}