媒体查询不起作用

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

对不起，但这个问题变得没有实际意义了：Firefox Dev版刚刚升级并改变了设备屏幕的呈现方式：你不能再使用下拉框选择屏幕尺寸; 您现在必须选择将显示其尺寸的设备名称。

当Firefox打开浏览器时，我已经遇到了问题。

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