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

Я новичок в адаптивном дизайне с использованием медиа-запросов 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;
}


}

26
css css3 html5 media-queries responsive-design

1 ответов

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

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

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

    я.е @media screen и (минимальная ширина: 732px)

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

32