サウウェブ

B'z、映画、海外ドラマ、スケボー、車、BUMPのブログ

WEB

cssでMedia Queries(@media)が効かないときに確認すること

ノートPC プログラム コード コーディング セキュリティ ディスプレイ

昔制作されたページをレスポンシブ化するときにメディアクエリ(@media)が効かなくて困ったので、そんなときに確認することをまとめました。

スポンサーリンク

確認すること

viewportを書いていない

メディアクエリは<head>内にviewportの記述がないと動いてくれません。
まずはじめに確認した方がいいかも。
昔のページならなおさら。

 

Media Queries(@media)の記述がおかしい

記述例ですが、正しく書かれていないか確認する。
変なことろで「}」があって、メディアクエリがちゃんと囲まれていなかったりしていないかチェック。

 

HTML側でのCSSの読み込みを疑う

そもそもHTML側でメディアクエリの読み込みがされているか確認する。
HTML内のCSS読み込みの記述で読み込まないようにしているかもしれないので、チェック。

 

まとめ

viewportを書いてなかった

私がハマったのは”viewport”を書いていないことが原因でした。

レスポンシブとか言われ出される前に制作されたサイトだったので、にmetaの「viewport」が書かれていなかった。

追記したらちゃんと@mediaが効きました。単純。

この記事が気に入ったら
いいね ! しよう

-WEB