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

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; }
}

我开始在浏览器中玩缩放页面，我触发了不同的查询规则……这种效果的原因是什么？我的屏幕尺寸不是 500 像素!

Answer 1

这不是指您的屏幕尺寸，而是指窗口尺寸。您可以通过使用鼠标重新缩放窗口或按“ctrl”和“+”或“ctrl”和“-”来触发这些事件。因此，对于高于 1000 的分辨率，您将拥有橙色背景，对于 800 及更高的分辨率，背景为绿色，对于 500 及更高的分辨率，背景为蓝色；