如何缩放与媒体查询关联的页面？

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或更高的背景蓝色。