一些@media规则不符合

Question

试图让我的不太棒的网站至少对移动设备友好，我遇到了一个奇怪的@媒体问题，我似乎无法解决。

当宽度超过800px时，指向主页的my homebutton链接的高度会有一个margin-top: 40vh，而且效果很好。我向CSS添加了一个媒体规则，以适应窄宽度用户和移动浏览器，包括

@media screen and (max-width: 800px){
    h1#homebutton {
        margin-top: 0;
        text-size: 1em;
    }
}

在其他@媒体规则中。页面上的所有其他规则似乎都没有问题，但h1#homebutton的margin-top和text-size规则将不会得到遵守。

Answer 1

当我在发帖前反复检查的时候，我发现了答案。把问题和答案放在这里，对其他同样受挫的人来说是有益的。

事实证明，CSS的顺序很重要；当@media规则低于(即代码中较低的)它正在修改的CSS规则时，它的行为是正确的，并修改了它们。当@media规则位于它修改的CSS之上时，规则下面的普通CSS就会被使用。

现在我的@media规则位于CSS的底部，它工作得很好。