html - 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”的文件。所有其他断点都在一个名为“responsive.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 的内容，然后你有四个断点，因为你已经有了它)