同じような疑問を持っている人がいないからなのか、こんなところでつまづく人がいないからなのか、スッキリする記事が見つけられず、色んな記事を総合した結果、自分なりに無理やり納得したのでまとめ。
状況
下記のようなCSSを書いて、Chromeデベロッパーツールでレスポンシブの表示確認をしていたところ、意図したブレイクポイントで切り替わらなくてドツボにはまりました。
See the Pen
media query01 by あやたろう@独女リゾートエンジニアの卵 (@aya2kiku)
on CodePen.
メディアクエリが適用されない理由をググってみたところ、
モバイルファースト か デスクトップファースト かで、メディアクエリを書く順番が変わる
というルールがあることがわかったのだけど、あくまで「ルールがある」ということを知っただけであって、なんでそうしなきゃいけないのか…がなかなかわからなかったのです。
こんな感じで理解
私が書いていたメディアクエリをイラストにするとこうなります↓
CSSは後から書いたものが優先されるので…
最後に書いた、
|
1 2 3 4 5 6 |
@media (max-width: 992px) { p { font-size: 40px; color: blue; } } |
のCSSだけが適用されていました。
そこで、メディアクエリの書き順を変更↓
すると…
幅によって、思った通りにCSSが反映されました。ε-(´∀｀*)ﾎｯ
考察
つい先日に書いた こちらの記事 の通り、「後から書いたCSSの方が優先される」…ということは知っていたのに、メディアクエリの書き順に関しては、なんでこんなに理解に苦しんだんだろう？という自問自答をしてみたところ…。
私、そもそもメディアクエリに関して、「CSS」というより「メディアクエリという独立した何か」だと認識していたっぽい。
うまく言えないけど、
っていう感じ。（どういう感じ？）
下記の参考サイト様の記事がなければ、未だに迷走していたかもしれません。感謝！
CSSの優先順位についてはこちら↓
