Q&A前提・実現したいこと
メディアクエリを使ってレスポンシブサイトを作っています。
発生している問題
スマホ対応にしようと思っているのですが、スマホ用のメディアクエリがうまく作動しません。 ローカルのブラウザで見ているのですが、うまく反映されません。 背景の色をPCでは赤、スマホでは黄色に表示させたいのですがスマホで見ると黄色ではなく白色になってしまいます。 スマホではうまく反映されていないのでしょう。 ブラウザの検証機能を使うと反映されています。
該当のソースコード
＜HTML＞ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta charset="UTF-8"> <link rel="stylesheet" href="css/common.css"> <title>TEST</title> </head> <body> <div class="abc"> </div> </body> </html> ＜CSS＞ * { margin:0; padding:0; } @media screen and (min-width: 767px) { body { background-color:red; } } @media screen and (max-width: 480px) { body { background-color:yellow; } }
試したこと
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
viewportを追加してみましたが変わりませんでした。
@media screen and (max-width: 480px)
こちらの数値を680pxにしたら反映されました。580pxにすると途中反映されなくて580px以下になると反映されました。
補足情報（FW/ツールのバージョンなど）
DREAMWEAVER21.1上ではきちんと色が変化します。
ですが、スマホで確認したり、ブラウザを拡大縮小すると反映されなくなります。
回答1件
0
ベストアンサー
ブラウザが４８０pxまで縮小できなかったのが原因だったようです。
スマホでもきちんと反映されました。
投稿2021/08/25 02:42
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。