html - 一些@media 规则不遵守

Question

为了让我的网站至少对移动设备友好，我遇到了一个奇怪的@media 问题，我似乎无法解决。

在大于 800 像素的宽度下，返回主页的我的 homebutton 链接的高度有一个 margin-top: 40vh 并且它工作正常。我在 CSS 中添加了一个媒体规则以适应窄宽度用户和移动浏览器，包括

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

以及其他@media 规则。页面上的所有其他规则似乎都可以毫无问题地得到遵守，但是 h1#homebutton 的 margin-top 和 text-size 规则> 不会遵守。

Answer 1

我在发帖前对内容进行了双重和三次检查，很快就找到了答案。为了其他人的利益而将问题和答案放在这里同样令人沮丧。

事实证明，CSS 的顺序很重要；当@media 规则低于(即在代码中较低)它正在修改的 CSS 规则时，它会正确运行并修改它们。当@media 规则高于它所修改的 CSS 时，规则下方的原始 CSS 会被遵守。

现在我的@media 规则位于 CSS 的底部并且工作正常。