Question

我编写了CSS媒体查询来处理类的宽度：

@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％，他们都没有被应用。为什么这样，我做错了什么？

Answer 1

在90%缩放时，您的网页可能会超过1920px，这就是您的所有查询都不适用的原因。您没有默认案例。您可以添加，例如：

.slides {
    width: 960px;
}

在所有查询之前。当然，在960px以上的屏幕上，您应该将.slides更改为1920px所需的宽度。

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

如果您希望.slides占屏幕的百分比，请使用vw（1vw = {viewport width} / 100）。例如，无论缩放级别如何，这都将使.slides 50％的视口宽度成为可能（除非适用更强的规则）：

.slides {
     width: 50vw;
}

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

1 个答案: