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

Question

我目前正在使用 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 做到这一点？

原文由 Alex K 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

查看 Enquire.js 。用于处理媒体查询的轻量级纯 JavaScript 库。看起来很酷。

原文由 user2168565 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

它不能用普通的 CSS 来完成。

看看 LESS 或 SASS。它们旨在使 CSS 的工作 更加动态和灵活。

• http://lesscss.org
• http://sass-lang.com

一旦你使用它们。没有他们你活不下去。

---

如果您想在某些分辨率下向正文添加现有的类选择器。

SASS

 .some-style { background-color:red; }

@media screen and (min-device-width: 480px) {
    body {
        @extend .some-style;
    }
}

原文由 Bart 发布，翻译遵循 CC BY-SA 4.0 许可协议