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

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

一旦你使用它们.你不能没有它们.

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

上海社会科学院

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

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

Answer 3

JavaScript 解决方案

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

编辑：缺少右括号