質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

1回答

711閲覧

@media screen and (max-width:○○px) で指定したpx値の75%のpx値でレスポンシブ対応になる(Google chrome)

koikoiSS

総合スコア0

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2021/05/12 11:07

前提・実現したいこと

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のところでしっかりとレスポンシブ対応に切り替わりました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

itagagaki

2021/05/12 11:14

試しにこんなことをやってみたらどうなりますかね? @media (min-width: 1000px) { body { background: red; } } @media (max-width: 999px) { body { background: blue; } }
koikoiSS

2021/05/12 11:22

試してみましたが、変わらず750pxを境に切り替わります。
guest

回答1

0

自己解決

ページのズームが原因でした。非常に初歩的な原因で申し訳ないです。。。
https://stackoverflow.com/questions/67533328/google-chrome-dev-tools-dont-work-as-per-my-input-value/67557525#67557525

投稿2021/05/16 14:02

koikoiSS

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問