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

Question

我正在使用媒体查询，无论浏览器小于或大于 1200px，css 始终检测到我的浏览器最小宽度为 768px.so 浏览器中的显示始终为 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

尝试颠倒媒体查询的顺序。最后一条规则 (768px) 覆盖其他规则，因为它是最后一条并且与其他规则具有同等优先级。

Answer 2

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

以小乐队为例： (min-width: 768px) and (max-width: 991px)

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

您可以将此应用到下一个波段下方的像素。对于顶部带，您不需要最大宽度。

Answer 3

在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 4

在我的例子中，它停止工作是因为上面的某些 css 定义缺少关闭“}”。

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

media query min-width not working

mpmediaquery