媒体查询的问题，它不起作用

Question

Does Anyone Know Why My Media Queries Doesn't Work ?有谁知道为什么我的媒体查询不起作用？ I'm Sure That There Is No Any mistake.. The Problem Is, I Want To apply The changes I putted In Extra small (max-width: 575px), And max-width 575px It's Mean That The Screens Smaller Than 575px supposed be like I did up, But What I Find When I Choose From Google Chrome The iPhone 6/7/8 Plus's Screen For Example Or Any Screen, I Don't See The Differences That I putted in Part Of Media Query In Extra Small.我确定没有任何错误。就像我做的那样，但是当我从 Google Chrome 中选择 iPhone 6/7/8 Plus 的屏幕或任何屏幕时，我没有看到我在超小媒体查询中放入的差异。 The Strange Thing Is When I Convert Max-width To Min-width With The Same Pixels The Changes apply After 575px and before it Too, How Is That possible If We Know That Min-Width Means That The Start Must be from it, changes Must apply Just From 575px And Up, But I Find That Changes apply Before 575px Too, Hooow?奇怪的是，当我使用相同的像素将最大宽度转换为最小宽度时，更改适用于 575px 之后和之前，如果我们知道最小宽度意味着开始必须来自它，那么这怎么可能，更改必须仅从 575px 开始应用，但我发现更改也适用于 575px 之前，Hooow？ I Hope You Understand Me, It Took Me 3 Days To Try To Fix It But No Avail.我希望你理解我，我花了 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 
    }
}

Answer 1

don't forget the viewport https://www.w3schools.com/css/css_rwd_viewport.asp不要忘记视口https://www.w3schools.com/css/css_rwd_viewport.asp
you need to change media rule to "@media only screen and (max-width: 575px)"您需要将媒体规则更改为“@media only screen and (max-width: 575px)”

Answer 2

One of the reasons is not following the same selector order when styling.原因之一是在样式化时没有遵循相同的selector顺序。 For example, In your code .header .overlay .order .例如，在您的代码中.header .overlay .order 。 You have to use the same selector which means styling .order this way doesn't work.您必须使用相同的selector ，这意味着以这种方式设置.order样式不起作用。 You can see the difference in the code below.您可以在下面的代码中看到不同之处。

This one is not working, I mean it works, but not as we're trying to achieve.这个不起作用，我的意思是它起作用，但不是我们试图实现的目标。 You have to name it in @media as you did before.您必须像以前一样在@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>

This one works perfectly as we want.这个可以完美地满足我们的需求。

 .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>

I'm not quite sure that this solves your problem , but one small change can make your page look different.我不太确定这是否能解决您的问题，但是一个小的更改可以使您的页面看起来不同。 And don't forget to use meta tag also.并且不要忘记也使用meta tag 。

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

媒体查询的问题，它不起作用

问题描述

2 个解决方案

解决方案1
1 2020-11-18 23:38:36

解决方案2
1 2020-11-19 00:06:05

媒体查询的问题，它不起作用

问题描述

2 个解决方案

解决方案1 1 2020-11-18 23:38:36

解决方案2 1 2020-11-19 00:06:05

解决方案1
1 2020-11-18 23:38:36

解决方案2
1 2020-11-19 00:06:05