Question

我正在使用媒体查询，无论浏览器是低于还是超过1200px，css总是检测到我的浏览器最小宽度是768px。因此浏览器中的显示总是750px。

也许这是一个简单的问题，但它让我困扰了几个小时。

我的HTML：

<div class="header_1">
            <div class="logo_1">
                <a href="Learn.html">
                    <img src="img/logo.svg">
                </a>
            </div>
            <div class="sign_in">
                <ul class="sign_list_1">
                    <li>Pricing</li>
                    <li>Sign in</li>
                </ul>
            </div>
</div>

My CSS:
@media (min-width: 1200px){
    .header_1{
        width: 1170px;
    }
}

@media (min-width: 992px){
.header_1{
    width:970px;}
}

@media (min-width: 768px){
.header_1{
        width: 750px;
    }
}

Answer 1

在HTML <head>添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用max-width代替min-width

@media all and (max-width: 1200px) {
   /* Your CSS Rules */
}

@media all and (max-width: 992px) {
   /* Your CSS rules */
}

@media all and (max-width: 768px) {
   /* Your CSS rules */
}

Answer 2

尝试撤消媒体查询的顺序。最后一条规则（768px）会覆盖其他规则，因为它是最后一条规则，并且与其他规则具有相同的优先级。

Answer 3

您正在匹配最后的查询。如果您明确了解媒体查询，这将变得更加容易 - 使用和运算符，因此顺序并不重要。

例如对于小乐队： (min-width: 768px) and (max-width: 991px)

因此，此媒体仅适用于768px和991px之间的宽度。

您可以将此权利应用到下一个频段下方的像素。对于顶级乐队，您不需要最大宽度。

Answer 4

就我而言，它停止工作，因为上面的某些 css 定义缺少关闭“}”。

媒体查询最小宽度不起作用

4 个答案: