Question

我为网站设置了四个视口，如下所示：

@media only screen and (min-width : 769px) {
 ...
}
@media only screen and (max-width: 768px) {
...
}
@media only screen and (max-width: 480px) {
...
}
@media only screen and (max-width: 320px) {
...
}

并声明了视口元元素，其中meta name =“viewport”content =“width = device-width”

除320px外，所有代码都能正常工作。即使我只是在浏览器中调整大小，当宽度为320px时，css的宽度为480px。

Answer 1

不确定错误的位置（随意将代码上传到jsfiddle），但您可以通过具体了解每个媒体查询的最大/最小尺寸来确保其防弹。

@media only screen and (max-width: 320px) {
...
}
@media only screen and (min-width:321px) and (max-width: 480px) {
...
}
@media only screen and (min-width:481px) and (max-width: 768px) {
...
}
@media only screen and (min-width : 769px) {
 ...
}

一个视口不在css中工作

1 个答案: