html - 强制媒体查询遵守决议

Question

我在使用媒体查询时遇到问题，目前我正在使用 Bootstrap ，在一个站点中我遇到了这个问题，我的媒体查询大小为 360 像素、640 像素和 768 像素。

有一个 div 不符合媒体查询，例如我有一个 margin-left:5%;在 360 媒体查询中，640 中为 3%，768 中为 -1%，当我在 360 媒体查询中时，使用 768 的边距与 640 相同。

我试图在 360 和 640 中放置一个 !important，但只占用了 640 像素的边距。我将大小调整为 768，此边距保持不变，因此看起来 768 具有更多层次结构。

有没有一种方法可以定义媒体查询的层次结构并强制它们遵守我需要的媒体查询的样式？

谢谢!

Answer 1

@media screen and (min-width: 360px) and (max-width: 640px){
    DIV#id{
        margin-left: 5%;
    }
}
@media screen and (min-width: 640px) and (max-width: 768px){
    DIV#id{
        margin-left: 3%;
    }
}
@media screen and (min-width: 768px){
    DIV#id{
        margin-left: -1%;
    }
}

您必须始终提及最小和最大宽度。并始终使用

<meta name="viewport" content="width=device-width">

在你的 html 页面中