移动断点冲突

Question

我正在使用一系列断点，但最后一个移动断点似乎被前一个断点 (max-width:980px) 覆盖了。我尝试通过添加 min-width:482 来调整 980px 断点，以试图更好地定位该查询，但没有效果。这是我正在处理的一系列现有断点：

@media only screen and (max-width:760px), (min-device-width:768px) and (max-device-width:1024px) {
}
@media (min-width:768px) and (max-width:991px) {
}
@media only screen and (max-width:1024px) {
}
@media only screen and (max-width:980px) {
}
@media only screen and (max-width:481px) {
}

我需要浏览器确认 max-width:481px 断点，以便移动样式生效。我知道某处有冲突，但我不太确定。

Answer 1

其中一些尺寸不起作用，因为它们已被 CSS 订单覆盖。

@media only screen and (max-width:760px), (min-device-width:768px) and (max-device-width:1024px) {}
@media (min-width:768px) and (max-width:991px) {}

这两个媒体断点被@media only screen and (max-width:1024px)覆盖

我看到你想使用 5 个断点，但是为了避免它们被覆盖，你可以使用 4:

1. max-width: 481px
2. max-width: 767px
3. min-width: 768px and max-width: 991px
4. min-width: 992px and max-width: 1024px

总而言之，如果宽度大小匹配，则仅适用于 CSS 的最后一个订单。

Answer 2

我假设你知道 CSS 如何解释所有声明的样式

首先让我们按照从先到后应用样式的顺序对所有媒体查询进行编号

// #5
@media only screen and (max-width:760px), (min-device-width:768px) and (max-device-width:1024px) {
}
// #4
@media (min-width:768px) and (max-width:991px) {
}
// #3
@media only screen and (max-width:1024px) {
}
// #2
@media only screen and (max-width:980px) {
}
// #1
@media only screen and (max-width:481px) {
}

现在让我们检查一下效果的范围，不要忘记顺序 #1 将首先应用，如果媒体匹配，则 #2 等等

1. 带有 #1 的样式将从 0px to 481px
应用
2. 带有 #2 的样式将从 0px to 980px
应用
3. 带有 #3 的样式将从 0px to 1024px
应用
4. #4 的样式将从 768px to 991px
应用
5. 带有 #5 的样式将从 0px to 760px and from 768px to 1024px
应用

如果您还没有看到任何冲突，那么这应该可以解释。别忘了顺序。