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

【问题标题】：Media query not working in css file媒体查询在 css 文件中不起作用
【发布时间】：2015-09-10 04:44:48
【问题描述】：

我正在尝试使用媒体查询将 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 进行测试。谁能告诉我原因？

【问题讨论】：

尝试使用：@media only screen and (max-width: 500px) {
我之前试过。一样的。什么都没有发生
您使用的是引导程序还是其他框架？
只是 html 和 css。我认为我的 css 文件会导致错误。

标签： html css responsive-design media-queries

【解决方案1】：

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

如果是：尝试在 CSS 中将 @media all ... 更改为 @media screen。

如果不是：检查 CSS 文件的路径。仅使用 @media 尝试简单的 CSS 文件... 也许你的 CSS 有错误（部分没有显示给我们）。

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

【讨论】：

非常感谢。你说得对。我的 CSS 文件导致错误。

【解决方案2】：

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

尝试类似：

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

【讨论】：