Запросы мультимедиа для разных уровней масштабирования браузера

Я новичок в гибком дизайне с использованием медиа-запросов CSS3. Я четко понимаю, как мы настраиваем таргетинг на разные устройства, используя эти медиа-запросы, но место, где я запутался, - BROWSER ZOOMING!!.

Для eg: Это мое нормальное правило 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%, этот конкретный мультимедийный запрос вступает в игру.

Как узнать, какие медиа-запросы писать для разных уровней масштабирования, иначе говоря, какова связь между уровнями масштабирования браузера и шириной пикселей.

Ответы

Ответ 1

После долгих поисков. Я нашел ответ.

  • Нам не нужно настраивать масштабирование браузера явно, используя медиа-запросы. Когда мы приближаемся к нашему браузеру, он ведет себя как разные устройства.

    Например, если мы увеличиваем уровень 175%, ширина пикселя нашего экрана равна 732px (. Вы можете найти соотношение между масштабированием и шириной пикселя в http://mqtest.io/), что составляет около 768 пикселей ipad mini. поэтому вы можете настроить как Ipad mini, так и масштабирование браузера (@175%), используя общий медиа-запрос

    i.e @media и (min-width: 732px)

    Итак, если вы нацеливаете разные устройства с использованием медиа-запросов (сделайте сайт чувствительным для разных Устройств), то само масштабирование вашего браузера само по себе будет учтено.