媒体查询不起作用

Question

有谁知道为什么我的媒体查询代码不起作用？

 <div class="box"></div> 

 .box {
     background-color: red;
     width: 100%;
     height: 50px;
 } 

 @media only screen and (max-device-width: 768px)  {
     .box {border: 5px solid blue;}
 }

http://jsfiddle.net/N9mYU/

Answer 1

您可以使用

(max-width: 768px)

而不是

(max-device-width: 768px)

。请参阅

max-device-width

/

max-width

之间的区别解释此处。

如果您希望媒体查询在移动设备上运行，请添加视口：

<meta name="viewport" content="width=device-width, initial-scale=1">

此处更新示例

@media only screen and (max-width: 768px) {
    .box {
        border: 5px solid blue;
    }
}

进一步阅读：像素不是像素/视口宽度和屏幕宽度（mdn）

Answer 2

此问题最常见的原因是您在 CSS 文件中设置元素样式之前定义了

@media

查询，因此您应该始终将 @media

 查询放在 CSS 文件末尾！

Answer 3

试试这个，在页面顶部，这是针对智能手机响应能力的

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Answer 4

抱歉各位，这个问题变得毫无意义：Firefox Dev 版本刚刚进行了升级并更改了设备屏幕的呈现方式：您不能再使用下拉框按像素选择屏幕尺寸；您现在必须选择将显示其尺寸的设备名称。

当我打开浏览器时 Firefox 发布更新时，我一直遇到问题。

带有 firebug 的常规 Firefox 浏览器现在响应速度更快。我一直在处理的一些问题是，当我设置诸如“最小宽度 320px”之类的限制时，FDE 只会以更大的最小值（例如 380px）执行更改。这在更新版本中没有改变。