cssでMedia Queries(@media)が効かないときに確認すること
昔制作されたページをレスポンシブ化するときにメディアクエリ（@media）が効かなくて困ったので、そんなときに確認することをまとめました。
スポンサーリンク
確認すること
viewportを書いていない
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
メディアクエリは<head>内にviewportの記述がないと動いてくれません。
まずはじめに確認した方がいいかも。
昔のページならなおさら。
Media Queries(@media)の記述がおかしい
@media screen and (min-width:769px){
/* PC用CSS -------------- */
.hoge{
display: none;
}
}
@media screen and (max-width:768px){
/* スマホ用CSS -------------- */
.hoge{
display: none;
}
}
記述例ですが、正しく書かれていないか確認する。
変なことろで「}」があって、メディアクエリがちゃんと囲まれていなかったりしていないかチェック。
HTML側でのCSSの読み込みを疑う
<link href="sp.css" rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" />
そもそもHTML側でメディアクエリの読み込みがされているか確認する。
HTML内のCSS読み込みの記述で読み込まないようにしているかもしれないので、チェック。
まとめ
viewportを書いてなかった
私がハマったのは”viewport”を書いていないことが原因でした。
レスポンシブとか言われ出される前に制作されたサイトだったので、にmetaの「viewport」が書かれていなかった。
追記したらちゃんと@mediaが効きました。単純。