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

我目前正在使用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？

12885

2018-02-22 11:14

起源

stackoverflow.com/questions/4801224/... - 这听起来像解决你的问题 - Daniel Ursu

@Daniel，几乎是的，但它只适用于所有设备（台式机），我想找到一种方法使用 min-device-width 确保这不仅仅是一个小型的13英寸笔记本电脑屏幕 - Alex K

那么，您还应该检查用户代理。 quirksmode.org/js/detect.html - Daniel Ursu

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

2018-03-14 07:29

这与我需要的东西类似！我只是投票支持这个，因为它可以在回调中做任何事情，使用媒体查询，并为旧浏览器提供后备......我们还需要什么！ - Alex K

使用纯CSS无法完成。

看看LESS或SASS。它们旨在制作 与...合作 CSS更具动态性和灵活性。

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

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

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

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

2018-03-14 07:32

如何使用LESS / SASS并且没有javascript将“body-iphone”类添加到body标签？ .. - Cétia

@Bixi看到我更新的答案。 - Bart

好吧，但你没有回答这个问题。这不会向body标签添加类，它只是将现有类的css应用于body标签。 - Cétia

@Bixi我从来没有说过你可以使用样式向body节点添加一个实际的类。我的方法几乎是一样的。唯一真正的区别是javascript会在节点的classList中添加一个实际的类，但事实并非如此。它只适用于大多数情况下应该足够的风格。 - Bart

这对sass不起作用 - Burawi

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

2018-02-22 12:56

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

2018-03-09 09:17

一个JavaScript解决方案

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

2017-09-22 05:39

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