Question

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

宽度超过800px时，我的homebutton链接返回主页的高度为margin-top: 40vh，效果很好。我在CSS中添加了一个媒体规则，以适应窄带用户和移动浏览器，包括

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

其他@media规则。该页面上的所有其他规则似乎都没有问题，但margin-top的{{1}}和text-size规则将不会遵守。

Answer 1

我发现答案是因为我在发布之前对事情进行了双重和三重检查。把问题和答案放在这里为了别人的利益同样感到沮丧。

事实证明，CSS的顺序很重要;当@media规则低于（即代码中较低）时，它正在修改的CSS规则，它表现正确并修改它们。当@media规则上面它修改的CSS时，规则下面的vanilla CSS就会被粘贴。

现在我的@media规则位于CSS的底部，它运行正常。