媒体查询无法正常工作

时间:2015-02-15 17:02:23

标签: html css media-queries

所以,我遇到了一个我似乎无法弄清楚原因的问题。

我有一些CSS文件:

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

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

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

到目前为止,一切都很好,我的页面响应性很强。但是,出于某种原因,我无法使用我的叠加层进行媒体查询。这是我在文件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%工作。

为什么会这样?

感谢。

1 个答案:

答案 0 :(得分:3)

你如何加载你的CSS?你的媒体css应该在风格和时间之后。 overlay.css