媒体查询有问题，它不起作用答案

【问题标题】：Problem With Media Query, it doesn't Work媒体查询有问题，它不起作用
【发布时间】：2021-03-02 05:20:40
【问题描述】：

有人知道为什么我的媒体查询不起作用吗？我确定没有任何错误.. 问题是，我想应用我在 Extra small (max-width: 575px) 和 max-width 575px 中所做的更改，这意味着小于 575px 的屏幕应该像我做的那样，但是当我选择时我发现了什么来自谷歌浏览器 iPhone 6/7/8 Plus 的屏幕或任何屏幕，我看不到我在媒体查询的一部分中放入的差异非常小。奇怪的是，当我将最大宽度转换为具有相同像素的最小宽度时，更改也适用于 575px 之后和之前，如果我们知道最小宽度意味着必须从它开始，那么这怎么可能？仅适用于 575px 及以上，但我发现更改也适用于 575px 之前，Hooow？我希望你能理解我，我花了 3 天时间试图修复它但没有成功。

    <!-- Start Header -->    
    
        <header class="header">
            <div class="overlay">
                <div class="container">
                    <h1>Choose Your Plan</h1>
                    <div class="plan">
                        <div>Free Plan Contain 10GB</div>
                        <div>10$ Plan Contain 50GB</div>
                    </div>    
                    <div class="order">Order Now And get Another One For Free</div>
                </div>   
            </div>
        </header>
        
        
        <!-- End Header -->




    /* Start Header */

.header {
    background: url('../Images/business.jpg') no-repeat top center;
    background-size: cover;
    min-height: 500px;
    position: relative
    
}

.header .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(31 8 8 / 70%);
    color: #fff;
}

.header .overlay h1 {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    font-size: 50px
}

.header .overlay .plan {
    width: 100%;
    font-size: 25px;
    text-align: center;
    margin-top: 50px;
    display: flex;
    justify-content: space-evenly
}

.header .overlay .plan > div {
    border: 2px solid #fff;
    color: #fff;
    padding: 20px
}

.header .overlay .order {
    border: 2px solid #fff;
    width: 45%;
    margin: 50px auto 0;
    padding: 15px;
    font-size: 25px;
    text-align: center;
}
/* End Header */




    /* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    .header .overlay .plan {
        display: block
    }
    
    .header .overlay .plan > div {
        width: 30%;
        margin: 0 auto 15px
    }
    
    .order {
        display: none 
    }
}

【问题讨论】：

你没有忘记视口元标记吗？

标签： html css

【解决方案1】：

其中一个原因是样式设置时没有遵循相同的selector 顺序。例如，在您的代码中.header .overlay .order。您必须使用相同的selector，这意味着样式.order 这种方式不起作用。您可以在下面的代码中看到不同之处。

这个不起作用，我的意思是它起作用了，但不是我们想要实现的。您必须像以前一样将其命名为 @media。

.text .content .order {
    color: red;
}

@media(max-width: 576px){
    .order {
        color: blue;
    }
}

<div class="text">
    <div class="content">
        <p class="order">Paragraph</p>
    </div>
</div>

这个可以按照我们的要求完美运行。

.text .content .order {
    color: red;
}

@media(max-width: 576px){
    .text .content .order {
        color: blue;
    }
}

<div class="text">
    <div class="content">
        <p class="order">Paragraph</p>
    </div>
</div>

我不太确定这是否能解决您的问题，但一个小改动可以让您的网页看起来与众不同。并且不要忘记也使用meta tag。

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

【讨论】：

【解决方案2】：

不要忘记视口https://www.w3schools.com/css/css_rwd_viewport.asp
您需要将媒体规则更改为“@media only screen and (max-width: 575px)”

【讨论】：