メディアクエリ(Media Queries)が効かないときに確認したいこと
メディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。
メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。
メディアクエリ
@media screen and (max-width: 320px); というように表示させるディスプレイサイズごとに
CSSを記述していける書き方です。
CSSは原則として下に書く内容が優先度が高く処理されるため（イレギュラーもあります）
メディアクエリを下に追記していくことでディスプレイサイズごとにCSSを上書きしていく処理になります。
2019年11月現在メディアクエリの最新はMedia Queries Level 4として仕様がまとめられています。
https://www.w3.org/TR/2017/CR-mediaqueries-4-20170905/ Media Queries Level 4
Media Queries Level 4 （日本語訳）
メディアクエリ(Media Queries)が効かないときに確認したいこと
headタグ内のmetaタグにビューポートの記述があるのが
メディアクエリを使える前提になります。