フローティング要素と負のマージンを使用してレスポンシブ レイアウトを設定しています。
ブラウザのサイズ変更はすべてうまく機能します。デスクトップではコンテンツ + 左右のサイドバー、タブレットではコンテンツと右側のサイドバーに左側のサイドバーがオフキャンバス、携帯電話では左右のサイドバーがオフキャンバスです。
JavaScript を使用して負のマージンを変更し、たとえば、ボタンがクリックされたときに左側のサイドバーをキャンバス上に移動し、もう一度クリックしたときにキャンバス外に戻し、元の位置に戻します (デバッグで確認)。
しかし、JavaScript で余白を操作したので、ブラウザーのサイズを変更するとレイアウトが崩れます。これは、メディア クエリのしきい値を超えると、JavaScript で更新したプロパティが更新されなくなるためです。
メディア クエリはまだ「動作中」です。たとえば、メニュー ボタンの表示は、メディア クエリで確立されたとおりにオンとオフを切り替えます。
メディア クエリを "更新" して、JavaScript で変更された可能性のあるプロパティを更新し、元に戻すにはどうすればよいですか?