レスポンシブなCSSを書く作業においては、Google Chromeなどで開発者ツール(F12)を使うと思います。
モバイルデバイスのエミューレーターみたいな機能がついているので、画面幅の小さい場合の表示の確認がデスクトップ上でできて至便です。
と、思って作業をしていたら、なぜか「レスポンシブ」が効かない状態に直面しました。よくある@media screen and (max-width:700px)みたいな感じのCSSを入れていたのが効かず、スマホ表示にしても変化しない状況です。開発者ツールを閉じてフツーにブラウザーウィンドウの幅を狭くするとメディアクエリーが発動するので、CSS自体は間違ってなさそうです。
Chromeの問題なども疑いつつ試行錯誤すること数十分…
原因はHTMLにviewportの指定がなかったことでした。
<meta name="viewport" content="width=device-width,initial-scale=1">これをHTMLの<head></head>内に記述することで、表示領域の幅がデバイス画面の幅であることが指定され、メディアクエリーも正しく機能したようです。
viewportの記述がある場合とない場合の挙動の正確な違いまでは整理できていませんが、一旦これで解決ということで。