移动断点冲突

Question

我正在使用一系列断点，但是最后一个移动断点似乎被上一个断点所覆盖（最大宽度：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开始应用

如果您还看不到任何冲突，则应该解释一下。不要忘记订单。