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

【问题标题】：media query min-width not working媒体查询最小宽度不起作用
【发布时间】：2021-04-27 16:38:25
【问题描述】：

我正在使用媒体查询，无论浏览器低于还是超过 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;
    }
}

【问题讨论】：

此问题与stackoverflow.com/questions/10306670/…重复

标签： mpmediaquery

【解决方案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 */
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

因此，此媒体仅适用于 768 像素到 991 像素之间的宽度。

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

【讨论】：

【解决方案4】：

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

【讨论】：