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

Question

我的一般问题是,如何单独使用css媒体查询有条件地添加或删除特定类的类或ID？例如,在下面的示例代码中,如何在"Class_A"的所有div中添加"Class_B" @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>

当屏幕从medium(md)跳到small(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无法做到这一点.一种方法是利用extend像LESS这样的CSS预处理器.

少例:

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

另一种方法是使用Javascript根据屏幕大小添加类.像Modernizr.mq这样的库让这很容易.