CSS メディア クエリはブラウザのズーム レベルをどのように処理しますか?

ブラウザのズーム レベルに対するメディア クエリを理解する

CSS3 メディア クエリを利用したレスポンシブ デザインは、さまざまな画面サイズに合わせて Web サイトを最適化する効果的なアプローチです。ただし、ブラウザのズームには特有の課題があります。

#body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

の次の CSS ルールを検討してください。要素:

@media only screen and (min-width:150px) and (max-width:600px){
    #body {
        margin: 0 auto;
        width: 90%;
        clear: both;
    }
}

幅 150 ピクセルから 600 ピクセルのデバイスをターゲットにするには、通常、次のメディア クエリを追加します:

ただし、Google Chrome ブラウザを 200 にズームインする場合は、 %、前述のメディア クエリが予期せずアクティブ化されます。

Zoom 間の関係を理解するレベルとピクセル幅

この問題に対処する鍵は、ブラウザーのズームがさまざまなデバイスを効果的にシミュレートしていることを認識することにあります。たとえば、175% ズームでは、ブラウザのピクセル幅は約 732 ピクセルで、iPad mini の画面幅 768 ピクセルと一致します。

メディア クエリによるブラウザのズームのターゲット

当初の想定に反して、メディア クエリを通じてブラウザのズームを明示的にターゲットにする必要はありません。ズーム中、ブラウザは基本的に別のデバイスのように動作します。

したがって、さまざまなデバイスに対応できるように Web サイトをすでに調整している場合、メディア クエリはブラウザのズームを自動的に考慮します。

要約、メディア クエリを使用してさまざまなデバイス サイズに対処することで、ブラウザーのズーム シナリオを効果的に網羅できます。これにより、ズーム レベルを明示的にターゲットにする必要がなくなります。

以上がCSS メディア クエリはブラウザのズーム レベルをどのように処理しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。