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

Question

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

CSS：

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

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

媒体查询成功覆盖bootstrap CSS，但只有（max-width：768px）才能应用任何屏幕大小。

媒体查询的顺序是否有任何问题？

Answer 1

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

如果您正在寻找快速修复，请将max-width：468px秒，或将后者转换为

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

但要正确地执行此操作，您应该重新考虑规则在级联样式表中的逻辑运作方式。