Question

我遇到了媒体查询的问题，目前我正在使用bootstrap，在一个网站中我遇到了这个问题，我的媒体查询大小为360px，640px和768px。

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

我试图在360和640中放置一个！important，但是只需要640px的余量。我调整到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页面

强制媒体查询尊重解决方案

1 个答案: