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