使用 Bootstrap 媒体查询覆盖自定义媒体查询

Question

我在自己的 css 中为不同的设备尺寸编写了媒体查询。

CSS：

@media only screen and (max-width :480px)
{
    ...
}

@media only screen and (max-width :768px)
{
    ...
}

媒体查询成功地覆盖了引导 CSS，但无论屏幕尺寸如何，只有 (max-width :768px) 被应用。

媒体查询的顺序有什么问题吗？

Answer 1

与所有 CSS 一样，如果第二组媒体查询适用于相同的像素宽度，则它们将覆盖第一组中的任何内容。在您的情况下，第二组也适用于 480 像素以下的屏幕尺寸。

如果您正在寻找快速修复，请将 max-width:468px 放在第二个，或者将后者转换为

 @media only screen and (min-width: 481px) and (max-width :768px)

但要正确地做到这一点，您应该重新考虑您的规则在级联样式表中的逻辑工作方式。