ズームすると壊れる 2 列のページ レイアウトを使用する単純なページがあります。ここにあります-cmd +でズームインしてみてください：
http://jamesabbottdd.com/ems-with-max-width.html
ヘッダーが右側で壊れ、水平スクロールバーが表示されます。もともと、これは要素のサイズ設定と最大幅の設定にピクセルを使用しているためだと考えていました。この記事はまさにその問題についてです:
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
次に、ピクセルを ems で上書きしましたが、問題は解決しません。
これは私を際限なく興味をそそります。私は約 10 年間 CSS を使用してきましたが、過去 3 年間は高いレベルで使用していますが、上記のページが壊れる理由はまだわかりませんが、これは次のとおりです。
どれだけズームインしても、そうではありません。
どんな助けでも大歓迎です。
うーん、2つのわずかに無関係な観測値を誤ってリンクしているように見えます。そのため、実際の問題を診断するのが少し難しくなっています。
症状の分離
スクリーンショットに基づくと、ヘッダーに視覚的な不具合が発生しているようです。さらに、水平スクロールバーが表示されますが、これはヘッダーのプロパティによるものではありませんのでご安心ください。実際、これは、幅が1130pxのヘッダーの下にあるラッパーdivが原因です。そのため、これだけズームインすると、すべてが画面に表示されないため、スクロールバーが作成されます。
本当の問題
ただし、ヘッダーの問題に戻ると、色が消える理由は、ヘッダーdivの幅が100％であるためです。そのスクリーンショットを撮ったときに左端までスクロールした場合、ブラウザの幅の100％をカバーしているため、ヘッダーの背景色に問題はありません。（この100％の幅がどこから来たのか疑問に思っている場合は、ヘッダー内のh1要素が原因です。h1のデフォルトの幅は通常100％で、要素があっても表示されないスタイルです。 Firebugのような検査官が開いています。）
提供したサイトでは、いくつかの理由でこの問題が表示されないことに注意してください。まず、ヘッダーに背景色がないため、その点で問題は発生しません（ただし、問題が発生した場合は、 divが実際には画面全体に広がっていないことがすぐにわかります。これは、内部のテキストよりも少し幅が広く、幅が固定されています。タイトルは、h1要素の幅の使用だけでなく中央に配置されます。 100％とtext-align:centerですがmargin:0 auto、ヘッダーdivに適用されているためです。しかし、今、問題を修正するにはどうすればよいですか？
解決策
ページの現在の構造では、最も簡単な解決策は、ヘッダーdivに定義された幅を与えることです。まあ、それ自体は幅ではなく、min-widthラッパーdivの幅と同じです。あなたがそれにスタイルを与えるならばmin-width:1130px、あなたはあなたの問題が解決されたのを見るはずです。
これがお役に立てば幸いです。（ただし、読むのに少し時間がかかった場合は申し訳ありません。）