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

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