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

Question

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

<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::

       }
}  

Answer 1

单靠 CSS 无法做到这一点。一种方法是在像 LESS 这样的 CSS 预处理器中利用 extend。

更少的例子:

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

另一种方法是使用 Javascript 根据屏幕尺寸添加类。像 Modernizr.mq 这样的图书馆让这变得非常简单。