画面サイズ/デバイスに基づいて適切な CSS スタイルを選択する方法

Question

Bootstrap 3 には、画面の解像度に応じて特定のブロックを表示または非表示にできる、応答性ユーティリティに優れた CSS クラスがいくつかあります ;http://getbootstrap.com/css/#sensitive-utilities-classes

CSS ファイル内に、画面解像度に基づいて適用するか適用しないスタイル ルールがいくつかあります。

どうすればいいですか?

本番展開用にすべての CSS ファイルを 1 つのファイルに圧縮しますが、画面解像度ごとに個別の CSS ファイルを使用する以外に解決策がない場合は、

Answer 1

検出は自動です。各画面解像度に使用できる CSS を指定する必要があります:

リーリー

Answer 2

@media を使用して をクエリします。まさにそのニーズに応えます。これらがどのように機能するかの例を次に示します:

リーリー

これは、幅が 800 ピクセル以下のデバイスでのみ機能します。

メディア クエリの詳細については、Mozilla Developer Network をご覧ください。