WebサイトをHTMLとCSSでだけで制作中、Chromeのデベロッパーツールで検証したところ、画面サイズを縮小した際メディアクエリが動きません。(図1)max-width: 600pxでメディアクエリの指定を行なっています。htmlをChromeで開いた上で、ウインドウを縮小した場合にはメディアクエリが動きます。(図2)メデイアクエリの指定は図1にあるグローバルナビにdisplay: none、図2のようにdisplay: noneにしておいたハンバーガーメニューをdisplay: blockにする、またフッターに対して position: absolute;、bottom:0;、left: 0;、width: 100%;をかけています。(position: relativeはどこにもかけていません。)さらにTwitterとYouTubeのアイコンにtext-algin: centerをかけています。(ちなみにメディアクエリでフォントの色を変えるなどの簡単な指定も挙動が確認できないです。)
自分が制作中のサイトはこのようにデベロッパーツールではメディアクエリの挙動が確認できないのですが、Chromeで検索したサイトは、デベロッパーツールで普通にレスポンシブの挙動が確認できます。なぜ自分のサイトはデベロッパーツールで検証した際、うまくメディアクエリの挙動が確認できないのでしょうか。改善策などあれば教えていただきたいです。
回答1件
あなたの回答
tips
プレビュー