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

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

score 9 · Accepted Answer

9

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

于 2013-03-14T07:29:51.653 回答

score 7 · Accepted Answer

它不能用纯 CSS 来完成。

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

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

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

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

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

score 3 · Accepted Answer

JavaScript 解决方案

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

score 1 · Accepted Answer

1

看看 conditionizr 这可能是你要找的http://conditionizr.com/

于 2013-02-22T12:56:49.303 回答

score 0 · Accepted Answer

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

5 回答 5