为什么我的@media的div高度不会改变？ [重复]

Question

此问题已经在这里有了答案：

Why media queries has less priority than no media queries css（2个答案）

Why do I have to put media queries at the bottom of the stylesheet?（4个答案）

CSS specificity, Media Queries and min-width（1个答案）

关闭4分钟前。

还是新手，但是玩了一点。在CSS父.article中，我设置了高度。当我尝试将@media的高度设置为<768时，什么都没有发生。

https://jsfiddle.net/avryx/1wusmqn6/21/

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

@media screen and (max-width:767px) {

    .article {
        padding: 5% 10%;
        height: 1000px;
    }

}

.article {
    background-color: #404040;
    height: 470px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    margin-top: 2%;
    margin-bottom: 2%;

}

Answer 1

因为从上到下读取css。最后设置的规则是将要执行的规则，因此使用@media下的.article，如下所示：

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.article {
    background-color: #404040;
    height: 470px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    margin-top: 2%;
    margin-bottom: 2%;

}

@media screen and (max-width:767px) {

    .article {
        padding: 5% 10%;
        height: 1000px;
    }

}

Demo