媒体查询在 css 文件中不起作用

Question

我正在尝试使用媒体查询将 divs 的宽度设置为 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

您是否检查过其他浏览器是否正常工作？

如果是：尝试在 CSS.

中将 @media all ... 更改为 @media screen

如果不是：检查 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 文件中不起作用

Media query not working in css file

html

css

media-queries

responsive-design