浏览器缩放 90% 不使用媒体查询

Question

我写了 CSS 媒体查询来处理 class:

的宽度

@media (max-width:1920px) {
    .slides {
        width: 860px;
    }
}
@media (max-width:1500px) {
    .slides {
        width: 852px;
    }
}
@media (max-width:1280px) {
    .slides {
        width: 850px;
    }
}
@media (max-width:1097px) {
    .slides {
        width: 680px;
    }
}
@media (max-width:960px) {
    .slides {
        width: 540px;
    }
}
@media (max-width:768px) {
    .slides {
        width: 410px;
    }
}

所有这些媒体查询都将浏览器从 500% 缩放到 100%。但是一旦我达到 90% none，它们就会被应用。为什么会这样，我做错了什么？

Answer 1

在 90% 缩放时，您的页面可能超过 1920px，这就是为什么 none 的查询适用。您没有默认案例。您可以添加，例如：

.slides {
    width: 960px;
}

在你所有的查询之前。当然，当屏幕宽度超过 1920px.

时，您应该将 960px 更改为 .slides 的所需宽度

在 1920px 监视器上，在 90% 处，页面宽度为 ~2133px。在 50% 它将有 3840px 等等...

如果您希望 .slides 占屏幕的百分比，请使用 vw（1vw = {视口宽度}/100）。例如，这将使您的 .slides 50% 的视口宽度，无论缩放级别如何（当然，除非适用更严格的规则）：

.slides {
     width: 50vw;
}

浏览器缩放 90% 不使用媒体查询

90% zoom on browser makes no media query used

css

media-queries