前提・実現したいこと
Google chromeを使用したレスポンシブ対応の質問です。
@media screen and (max-width:○○px) で指定した数値の75%の数値ところで、なぜかレスポンシブ対応になってしまいます。私の場合、○○のところに1000を入力しているのですが、Google chrome上では750pxのところでレスポンシブ対応に切り替わります。firefoxで試したところでは、1000pxのところでしっかりとレスポンシブ対応に切り替わりました。Google chromeで何か変な設定をしてしまっているのでしょうか。分かる方がいらっしゃれば、ご回答いただければ幸いです。簡単ですがコードも載せておきます。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="style.css"> 8</head> 9<body> 10 <header>header</header> 11 <div> 12 <nav>left</nav> 13 <main>center</main> 14 <aside>right</aside> 15 </div> 16 <footer>footer</footer> 17</body> 18</html> 19
CSS
1body { 2 margin: 0 auto; 3 min-height: 100vh; 4 display: flex; 5 flex-direction: column; 6 width: 800px; 7} 8header { 9 height: 150px; 10} 11div { 12 display: flex; 13 flex: 1; 14} 15main { 16 flex: 1; 17} 18nav { 19 width: 150px; 20} 21aside { 22 width: 200px; 23} 24footer { 25 height: 200px; 26} 27@media screen and (max-width:1000px){ 28 body { 29 width: 100%; 30 } 31}
試したこと
上述しましたが、firefoxでは1000pxのところでしっかりとレスポンシブ対応に切り替わりました。
回答1件
あなたの回答
tips
プレビュー