Html 媒体查询有问题，它没有'；行不通

有人知道为什么我的媒体查询不起作用吗？ 我确信没有任何错误。。 问题是，我想应用我在超小屏幕（最大宽度：575px）和最大宽度575px中所做的更改。这意味着小于575px的屏幕应该与我之前所做的一样，但当我从谷歌Chrome中选择iPhone 6/7/8 Plus的屏幕或任何屏幕时，我看不出我在部分媒体查询中的差异有多大。 奇怪的是，当我用相同的像素将最大宽度转换为最小宽度时，575px之后和之前的更改也适用，如果我们知道最小宽度意味着必须从它开始，更改必须从575px开始，但我发现更改也适用于575px之前，Hooow？ 我希望你能理解我，我花了三天的时间试图修复它，但没有用

    <!-- 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 
    }
}

选择你的计划
免费计划包含10GB
10美元计划包含50GB
现在订购，免费获得另一个
/*起始标题*/
.标题{
背景：url（'../Images/business.jpg'）没有重复的顶部中心；
背景尺寸：封面；
最小高度：500px；
职位：相对
}
.header.overlay{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：rgba（31.8/70%）；
颜色：#fff；
}
.标题.覆盖h1{
显示器：flex；
证明内容：中心；
边缘顶部：100px；
字体大小：50px
}
.header.overlay.plan{
宽度：100%；
字体大小：25px；
文本对齐：居中；
边缘顶部：50px；
显示器：flex；
对齐内容：空间均匀
}
.header.overlay.plan>div{
边框：2倍实心#fff；
颜色：#fff；
填充：20px
}
.header.overlay.order{
边框：2倍实心#fff；
宽度：45%；
保证金：50px自动0；
填充：15px；
字体大小：25px；
文本对齐：居中；
}
/*端头*/
/*超小型设备（肖像手机，小于576px）*/
@介质（最大宽度：575px）{
.header.overlay.plan{
显示：块
}
.header.overlay.plan>div{
宽度：30%；
保证金：0自动15px
}
.订单{
显示：无
}
}

不要忘记视口

您需要将介质规则更改为“@仅介质屏幕和（最大宽度：575px）”

不要忘记视口

您需要将介质规则更改为“@仅介质屏幕和（最大宽度：575px）”

---

其中一个原因是在设置样式时没有遵循相同的

选择器

顺序。例如，在您的代码

.header.overlay.order

中。您必须使用相同的

选择器

，这意味着样式设置

。这种方式不起作用。您可以在下面的代码中看到差异。



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


.text.content.order{
颜色：红色；
}
@介质（最大宽度：576px）{
.订单{
颜色：蓝色；
}
}

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



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


.text.content.order{
颜色：红色；
}
@介质（最大宽度：576px）{
.订单{
颜色：蓝色；
}
}

段落
您没有忘记视口元标记吗？您没有忘记视口元标记吗？