web-dev-qa-db-ja.com

メディアクエリを使用してクラスを追加/削除する

私の一般的な質問は、cssメディアクエリのみを使用して特定のクラスにクラスまたはIDを条件付きで追加または削除するにはどうすればよいですか？たとえば、以下のサンプルコードでは、すべてのdivに「Class_B」を追加するにはどうすればよいですか？ @media all and (max-width: 1000px) and (min-width: 700px)？の場合の「Class_A」

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

       }
}
htmlcsstwitter-bootstrapresponsive-designmedia-queries
15
Afflatus

CSSだけでこれを行うことはできません。 1つのアプローチは、LESSのようなCSSプリプロセッサでextendを利用することです。

少ない例：

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

別のアプローチは、Javascriptを使用して画面サイズに基づいてクラスを追加することです。 Modernizr.mq のようなライブラリは、これを非常に簡単にします。

13
Steve Sanders