bootstrap-sensitive.cssファイルによると、メディアクエリ@media (max-width: 767px)
が繰り返されます。つまり、ファイル内で2回発生します。なぜ繰り返されるのですか?
ここでファイルを見ることができますhttp://twitter.github.com/bootstrap/assets/css/bootstrap-sensitive.css
bootstrap-sensitive.cssファイルによると、メディアクエリ@media (max-width: 767px)
が繰り返されます。つまり、ファイル内で2回発生します。なぜ繰り返されるのですか?
ここでファイルを見ることができますhttp://twitter.github.com/bootstrap/assets/css/bootstrap-sensitive.css
うーん、私は確かに開発者がCSSを書いたときに何を意図していたかを理解しているとは言えませんが、これが私が思うことです...
メディアクエリの繰り返しは、CSSファイルのモジュール化を強化するためだけのものだと思います。@media (max-width: 767px)
とは両方とも@media (min-width: 768px) and (max-width: 979px)
ファイルに実際に2回存在するため、異常ではない可能性が高いことに注意してください。
これらのメディアクエリの最初の宣言は、特定のブラウザ幅で要素を非表示/表示するために要素に追加されるクラスを処理するように見えるため、実際にはさまざまなデバイスで選択的に(display
プロパティを指定して)実行されます。2番目の宣言は、12列のグリッドシステムで使用されるさまざまなクラスのスタイル(幅、マージン、最小の高さなど)を指定して、TwitterBootstrapの設計原則の基礎となるさまざまなクラスを処理しているようです。
最初のセットのクラスは、開発者の気まぐれで適用して、ページがさまざまなデバイスで表示されたときに特定の要素を表示/非表示にすることができます。2番目のセットのクラスは、フレームワークのグリッドシステムのより明確な特性であるため、最初のセットよりも少し厳密に適用されます(たとえば、両方の要素クラスと最初のセットの要素クラスを指定して、両方の効果を確認できhidden-phone
ますvisible-tablet
) 、ただし、span12
およびの要素クラスをspan6
指定すると、最後に指定されたクラスのみが有効になります)。
メディアクエリ宣言が2回(各セットに1つずつ)宣言されるのは、最初のクラスのセットが2番目のクラスのセットとアプリケーションで大幅に異なるためです。
CSSのスケーラブルでモジュラーなアーキテクチャ( 2012 )で、Jonathan Snookは、このモジュール化の概念について次のようにコメントしています。
はい、これは、メディアクエリ宣言が複数回宣言される可能性があることを意味しますが、モジュールに関するすべての情報をまとめることもできます。
(スタイル/ CSS / HTMLを参照するときに間違った用語を使用した場合はお詫びします!まだ学習中です...)