頁面如何與媒體查詢關聯縮放？

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和更高的背景，將具有藍色；。