メディアクエリ(Media Queries)が効かないときに確認したいこと

2019/11/082020/07/12

スポンサードリンク

メディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。
メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。

メディアクエリ
@media screen and (max-width: 320px); というように表示させるディスプレイサイズごとに
CSSを記述していける書き方です。

CSSは原則として下に書く内容が優先度が高く処理されるため（イレギュラーもあります）
メディアクエリを下に追記していくことでディスプレイサイズごとにCSSを上書きしていく処理になります。

2019年11月現在メディアクエリの最新はMedia Queries Level 4として仕様がまとめられています。

headタグ内のmetaタグにビューポートの記述があるのが
メディアクエリを使える前提になります。

スポンサードリンク

よかったらシェアしてね！

この記事を書いた人