Html 媒体查询不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21441993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Media queries doesn't work
提问by user2013488
Does anyone know why my media queries code doesn't work ?
有谁知道为什么我的媒体查询代码不起作用？
<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;}
}
回答by Josh Crozier
You would use (max-width: 768px)instead of (max-device-width: 768px). See the difference between max-device-width/max-widthexplained here.
您将使用(max-width: 768px)代替(max-device-width: 768px). 请参阅此处解释max-device-width/之间的区别。max-width
Add a viewport if you want the media query to work on mobile devices:
如果您希望媒体查询在移动设备上工作，请添加一个视口：
<meta name="viewport" content="width=device-width, initial-scale=1">
@media only screen and (max-width: 768px) {
.box {
border: 5px solid blue;
}
}
Further reading: A pixel is not a pixel/Viewport width and screen width (mdn)
进一步阅读：像素不是像素/视口宽度和屏幕宽度 (mdn)
回答by etkronberg
Sorry folks but this question just became moot: Firefox Dev edition just did an upgrade and changed how the device screens are presented: you can no longer select screen size by pixel using a drop down box; you now have to select the device name which will have its dimensions displayed.
抱歉各位，这个问题变得没有实际意义：Firefox 开发版刚刚升级并改变了设备屏幕的显示方式：您不能再使用下拉框按像素选择屏幕大小；您现在必须选择将显示其尺寸的设备名称。
I've long had problems when Firefox has issued an update while I have the browser open.
当我打开浏览器时 Firefox 发布更新时，我一直遇到问题。
The regular Firefox browser with firebug is now more responsive. Some of issues I have been dealing with is that when I set a limit such as "min-width 320px" FDE only performs the change at a larger min, say 380px. This does not change in the updated edition.
带有 firebug 的常规 Firefox 浏览器现在响应更快。我一直在处理的一些问题是，当我设置诸如“最小宽度 320 像素”之类的限制时，FDE 仅在更大的最小（例如 380 像素）处执行更改。这在更新版本中没有改变。
