Как масштабируется страница, связанная с медиа-запросами?

Question

Как масштабируется страница, связанная с медиа-запросами?

@media only screen and (min-width: 500px) { 
body { background-color: blue; } 
} 

@media only screen and (min-width: 800px) { 
body { background-color: green; } 
} 

@media only screen and (min-width: 1000px) { 
body { background-color: orange; } 
} 

я начинаю играть с масштабированием страницы в браузере, и я запускать различные правила запросов ... В чем причина этого эффект? Мой размер экрана не 500px!

Answer 1

Это не относится к размеру экрана, но на самом деле размер окна. Вы можете активировать эти события либо путем масштабирования вашего окна с помощью мыши, либо путем нажатия «ctrl» и «+» или «ctrl» и «-». Таким образом, для разрешения выше 1000 вы будете иметь оранжевый фон, для 800 и выше зеленый фон, а для 500 и выше - синий.