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

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做到这一点？

Answer 1

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

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;
    }
}

Answer 3

看一下conditionizr这可能就是你在寻找http://conditionizr.com/

Answer 4

JavaScript解决方案

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

Answer 5

对于此，也可以帮助Modernizr - 即使启用了svg或启用了其他功能，也可以检测到。

http://modernizr.com/