CSSのメディアクエリの挙動がおかしい

Chromeの開発者ツールなどで、パソコンで操作して、レスポンシブ確認のため画面幅をいじる

どうやら想定通りの挙動をしない

でも、開発者ツールなどでmin-widthの値を変えると、何故かその後は想定通りの挙動、レスポンシブる

解決方法

対象のHTMLファイルのhead内に次の一文追加

code: html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

どうやら、このビューポートなるものがないと、CSSのメディアクエリは動かないらしい

HTMLファイルからポチポチスクラッチでサイト作っててはまった罠

開発者ツールで値変更すると、なんかChrome君が気を回してよしなにしてくれるんだね。僕はエラーや注意文が欲しかったよ…