用引导媒体查询重写自定义媒体查询

Question

我在自己的css中编写了不同设备大小的媒体查询。

CSS：

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

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

媒体查询成功地覆盖了引导CSS，但只有(最大宽度:768 be )才能得到应用，无论屏幕大小如何。

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

Answer 1

与所有CSS一样，第二组媒体查询将覆盖第一组中的任何内容，如果它们适用于相同的像素宽度。在你的例子中，第二组也适用于480 to以下的屏幕大小。

如果您正在寻找快速修复，可以将最大宽度:468 to秒，或者将后者转换为

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

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