メディアクエリが効かない原因は、@media(max-width:900px)より後ろの同詳細度ルール

スマホ用@mediaで1列に戻したはずの料金欄が、幅を狭めると文字が1文字ずつ縦に割れた。原因はCSSの詳細度が同じ指定を@mediaブロックより後ろに書いていたため、ソースの「後勝ち」ルールで@media側の指定が丸ごと無効化されていたこと。@mediaを<style>の末尾に移すだけで直った実例。

結論

CSSの詳細度が同じ場合、@mediaの内側で書いたか外側で書いたかは優先順位に影響しない。ソースコード上で後に書かれた指定がそのまま勝つ。 実際に踏んだのは、料金セクションの見出しラベルを「PCは2列、スマホは1列」で組んでいたコンポーネントで、スマホ用の1列指定を@media (max-width: 900px)の中に書いていたが、同じセレクタ・同じ詳細度の基本ルール（2列指定）がファイルの後ろに置かれていたため、スマホの狭い画面でも2列のまま描画され、狭い列に押し込められた見出しの文字が1文字ずつ縦に折れて割れていた。直し方は@mediaブロックを<style>の末尾（すべての基本ルールより後）へ移動するだけで、CSSの値自体は1文字も変えていない。

全文

手順の詳しい説明・確かめ方・よくある質問は、元の記事にまとめています。

→ メディアクエリが効かない原因は、@media(max-width:900px)より後ろの同詳細度ルール｜Rebounder Tech Blog