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

Posted 2023-03-06

【中文标题】使用媒体查询添加类或其他属性

【英文标题】：Add class or other attribute using media query

【发布时间】：2013-02-07 23:52:17

【问题描述】：

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

【问题讨论】：

***.com/questions/4801224/… - 这听起来像是在解决你的问题

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

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

【参考方案1】：

JavaScript 解决方案

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

【参考方案2】：

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

http://modernizr.com/

【参考方案3】：

使用纯 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;
    

【讨论】：

您如何使用 LESS/SASS 且不使用 javascript 将“body-iphone”类添加到 body 标签？ ..

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

@Bixi 我从来没有说过你可以用样式向 body 节点添加一个实际的类。我的方法几乎是一样的。唯一真正的区别是 javascript 会在节点的 classList 中添加一个实际的类，而这不会。它只是应用在大多数情况下就足够的样式。

【参考方案4】：

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

【讨论】：

这和我需要的很相似！我只是投票支持它，因为它可以在回调中做任何事情，使用媒体查询，并且对旧浏览器有回退..我们还需要什么！

【参考方案5】：

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