web-dev-qa-db-ja.com

ブラウザのさまざまなズームレベルのメディアクエリ

私はCSS3メディアクエリを使用したレスポンシブデザインの初心者です。これらのメディアクエリを使用してさまざまなデバイスをターゲットにする方法を明確に理解していますが、混乱しているのはブラウザのズームです!!.

例えば：これは私の通常のボディCSSルールです

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

そして、このCSSルールを変更して、幅が150pxと600pxの範囲にあるデバイスをターゲットにする場合、この特定のメディアクエリを追加します。

@media only screen and (min-width:150px) and (max-width:600px){

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


}

問題：Googleを使用していますChromeと約200％にズームインすると、この特定のメディアクエリが有効になります。

ブラウザのズームレベルとピクセル幅の関係を別の言い方をすれば、異なるズームレベルに書き込むメディアクエリをどのように知ることができますか

csshtml5css3responsive-designmedia-queries
31
bhavya_w

多くの検索の後。答えを見つけました。

  • メディアクエリを使用して、明示的にブラウザのズームをターゲットにする必要はありません。ブラウザを拡大すると、異なるデバイスとして動作します。

    例：レベル175％でズームする場合、画面サイズのピクセル幅は732px（です。ズームとピクセル幅の関係は http：// mqtest.io/）ipad miniの近くの768pxです。そのため、一般的なメディアクエリを使用して、iPad miniとブラウザズーム（@ 175％）の両方をターゲットにできます

    i.e@ media screenおよび（min-width：732px）

    したがって、メディアクエリを使用して異なるデバイスをターゲットにした場合（異なるデバイスに対してサイトをレスポンシブにする）、ブラウザのズーム自体が考慮されます。

42
bhavya_w