CSS断点无法正常工作

Question

我设计了一个响应式网站，它具有以下断点。我为每个断点添加了背景色，以确保它们可以正常工作：

@media (min-device-width: 1366px) /*1366px or less*/ (background is blue)
@media (min-device-width: 1024px) /*1024px or less*/ (background is pink)
@media (max-width: 991.98px) /*992px or less*/ (background is grey)
@media (max-width: 767.98px /*768px or less*/ (background is green)
@media (max-width: 575.98px)  /*576px or less*/ (background is yellow)

除了“蓝色”以外，所有其他功能均有效，我不知道为什么。
第一个是我的桌面断点，它是一个名为“ custom.css”的文件。所有其他断点都在一个单独的名为“ response.css”的文件中

您可以查看站点here。

Answer 1

在对媒体查询使用min-width或min-device-width:时，必须以相反的顺序进行排序。看一下代码的开头：

@media (min-device-width: 1366px) /*1366px or MORE!*/ (background is blue)
@media (min-device-width: 1024px) /*1024px or MORE!*/ (background is pink)

第二个（min-device-width: 1024px）始终适用于宽度超过1024px的任何设备，仅因为它将覆盖第一个设备，因为之后，任何比1366更宽的设备都将比1024宽！

（您的“ ...或更少”假设是错误的：min-width: ...的意思是“ ...或更多“）

所以只需将它们以相反的顺序放置：

@media (min-device-width: 1024px) /*1024px or MORE*/ (background is pink)
@media (min-device-width: 1366px) /*1366px or MORE*/ (background is blue)

...或改用max-width。

---

还有另一种可能的解决方案：

@media (min-width: 1025px) /*1025px or MORE*/ (background is blue)
@media (max-width: 1024px) /*1024px or less*/ (background is pink)
@media (max-width: 991.98px) /*992px or less*/ (background is grey)
@media (max-width: 767.98px /*768px or less*/ (background is green)
@media (max-width: 575.98px)  /*576px or less*/ (background is yellow)

（第一个解决方案涵盖了大于1024的所有内容，然后您拥有了四个断点）

Answer 2

看起来粉红色的背景优先于蓝色：

此外，在查看CSS源文件之后，我发现蓝色的Media约束实际上没有媒体约束：

因此，正在发生的事情是粉红色优先于蓝色背景颜色，因为其CSS文件响应.css已在custom.css之后加载。要解决此问题，请第二次加载custom.css（可能会或可能不会修复），或者理想情况下，请确保在custom.css中的body元素上放置了正确的媒体约束。