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

Question

有谁知道为什么我的媒体查询不起作用？ 我确定没有任何错误。就像我做的那样，但是当我从 Google Chrome 中选择 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 
    }
}

Answer 1

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

Answer 2

原因之一是在样式化时没有遵循相同的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 个解决方案

解决方案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