Я новичок в адаптивном дизайне с использованием медиазапросов CSS3. Я четко понимаю, как мы нацеливаемся на разные устройства с помощью этих медиазапросов, но место, где я запутался, - БРАУЗЕР ЗУМИНГ !!.

Например: Это мое нормальное тело css правило

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

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

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

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


}

проблема: Я использую Google Chrome, и когда я увеличиваю изображение до 200%, этот конкретный медиа-запрос вступает в игру.

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