为什么我的 div 的高度不会在我的@media 中改变？

Question

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

* {
    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是从上往下读的。最后设置的规则，就是要执行的规则，所以在.article下面使用@media，像这样：

* {
    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

为什么我的 div 的高度不会在我的@media 中改变？

Why won't the height of my div change in my @media?

css

height