html - 媒体查询无法正常工作

Question

所以，我遇到了一个我似乎无法找出原因的问题。

我有一些 CSS 文件:

1) styles.css - 包含大部分网页样式。

2)overlay.css - 包含我的叠加层的样式。

3) media.css - 包含所有媒体查询。

到目前为止，一切运行良好，我的页面 react 灵敏。但是，由于某种原因，我无法使媒体查询与我的叠加层一起使用。这是文件overlay.css 中叠加层的CSS:

#aboutus {
    position: fixed;
    background-color: white;
    left: 50%;
    top: 50%;
    width: 800px;
    height: 450px;
    margin-left: -400px;
    margin-top: -225px;
    border-radius: 20px;
    z-index: 9999;
}

这是我在 media.css 中的媒体查询:

@media screen and (max-width: 700px) {
    #aboutus {
        background-color: red;
    }
}

目前此查询没有任何效果。奇怪的是，如果我将查询放在overlay.css 中的代码下，它确实可以100% 工作。

为什么会这样？

谢谢。

Answer 1

你如何加载你的CSS？您的媒体 CSS 应该位于 styles 和 overlay.css 之后的最后