Question

我正在尝试使用媒体查询使较小屏幕的div的宽度为100％。然而，媒体查询似乎不适用于我的CSS文件。我的css文件的部分代码如下：

@media all and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}
@media all and (min-width: 500px) {
    body {
        background-color:red;
    }
}

然而，没有看到背景颜色的变化。当我把媒体查询放在html文件上时，它似乎有效。

<link rel="stylesheet" <!-- media="only screen and (max-device-width: 480px)"  -->type="text/css" href="dec.css">

但是当我把代码放在css文件上时，它就不起作用了。我正在使用IE 11进行测试。谁能告诉我原因？

Answer 1

你检查另一个浏览器，有效吗？

如果是：尝试将@media all ...更改为CSS中的@media屏幕。

如果没有：检查CSS文件的路径。只用@media尝试简单的CSS文件... 也许你在CSS中有错误（部分没有向我们展示）。

在颜色名称后尝试添加！important。

Answer 2

我认为问题在于你放在min-width和max-width中的值是相同的（500px），如果你在一个宽度正确的屏幕上进行测试，这将导致一个规则总是覆盖另一个规则500px。

尝试类似：

@media all and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}
@media all and (min-width: 501px) {
    body {
        background-color:red;
    }
}

媒体查询无法在css文件中工作

2 个答案: