时间戳

首页 > 解决方案 > CSS断点不起作用

html - CSS断点不起作用

问题描述

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

@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”的单独文件中

您可以在此处查看该站点。

标签： htmlcssresponsive-designmedia-queries

解决方案

当使用min-widthormin-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) 将始终适用于任何大于 1024 像素的设备，因为它会覆盖第一个，因为它紧随其后，任何大于 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 的所有内容，然后您已经拥有了四个断点）

推荐阅读