0

我的媒体查询有问题，目前我正在使用引导程序，在一个站点中我遇到了这个问题，我有大小为 360px、640px 和 768px 的媒体查询。

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

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

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

谢谢！

4

1 回答 1

0 
@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 页面中

于 2013-11-08T18:54:15.093 回答