使用媒体查询添加/删除类

Posted 2023-03-05

【中文标题】使用媒体查询添加/删除类

【英文标题】：Add/Remove classes using media queries

【发布时间】：2014-09-07 07:03:15

【问题描述】：

我的一般问题是如何单独使用 css 媒体查询有条件地向特定类添加或删除类或 ID？例如，在下面的示例代码中，当@media all and (max-width: 1000px) and (min-width: 700px) 时，如何将“Class_B”添加到所有带有“Class_A”的 div？

<div class="Class_A"><div>

---

我的具体情况：我使用的是 Twitter Bootstrap v3.2.0。我有一个带有一系列按钮的标题，如下所示：

<button class="btn navbar-btn">FooA</button>
<button class="btn navbar-btn">FooB</button>
<button class="btn navbar-btn">FooC</button>

当屏幕从中 (md) 跳转到小(sm) 时，我想将“btn-sm”类添加到所有这些元素中。我怎样才能最有效/优雅地做到这一点？（如果可能的话，我宁愿不使用 JS 或添加任何额外的库）

我意识到我可以为所有这些按钮添加一个任意类，例如“btn-sm-duplicate”，并且仅在浏览器达到特定规范时才定义它，如下面的代码。然而，当它真的不需要时创建一个重复的类似乎很丑……你能提出一些建议吗？

@media all and (max-width: 1000px) and (min-width: 700px) 
       btn-sm-duplicate

::Copy/Paste all the attributes of btn-sm from bootstrap::

       
  

【问题讨论】：

你为什么觉得它丑？

@DavidG - 我认为这很丑，因为 btn-sm css 的重复。我希望完全避免创建 btn-sm-duplicate 类。

添加另一个类有什么意义，只需在媒体查询中更新同一类的css规则即可。媒体查询的重点是允许您根据宽度更改规则。看来你想多了

@Haungism 实际上，如果您有 .column-50 之类的东西，然后将宽度设置为 100%，那就不太对了，所以更改类名是解决它的好方法。

【参考方案1】：

您不能仅使用 CSS 来做到这一点。一种方法是在 LESS 等 CSS 预处理器中利用 extend。

少例子：

@media (max-width: 991px) 
    btn-sm-duplicate
        &:extend(.btn-sm);
    

另一种方法是使用 javascript 根据屏幕大小添加类。像 Modernizr.mq 这样的库使这变得非常容易。

【讨论】：

这在 SCSS 中现在是允许的。尝试从媒体查询中扩展现有类将产生以下错误：Error: You may not @extend an outer selector from within @media. You may only @extend selectors within the same directive.