「@media only screen and (max-width: 500px)」を使用して CSS にブレークポイントを設定しています。
ブレークポイントに到達すると色が変わるように設定すると、次のように機能します。
@media only screen and (max-width: 500px) {#container{color:black;}}
ブラウザーのサイズを変更すると、コンテナーの div は黒くなりますが、ブレークポイントを設定して div のマージンを変更すると、ブレークポイントはトリガーされません。
したがって、クエリを次のように設定すると:
@media only screen and (max-width: 500px) {#container{margin-left: 0px;}}
色の変化をテストするときにサイズを変更したときとまったく同じ方法で画面のサイズを変更しても、何も変わりません。
メインの css ファイルは #container を margin-left に設定します。18% で、これを手動で 0px に変更すると、ドキュメントがビューポートの左端まで移動します。
さまざまなスタイルと html 要素を試してみましたが、色の変更は非常に信頼できるようで、ほとんどすべての組み合わせで機能しますが、div のサイズ変更や再配置はまったく機能しないようです。これはなぜでしょうか？
答え：
@media クエリを css ファイルの先頭に配置していましたが、css ファイルの末尾に移動すると、サイズが変更されました。ただし、ファイルの先頭の色を変更したのにサイズを変更しなかったのはなぜですか?