CSS 媒体查询不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18207076/
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
CSS Media Query Won't Work
提问by Alex Clinton
I keep trying to do a media query in my CSS doc doing something like:
我一直试图在我的 CSS 文档中做一个媒体查询，比如：
@media screen and (max-device-width: 480px) { /*css here*/}
but it won't work when I test it on an iPhone. I've tried changing the sizes and using the portrait/landscape feature, but still nothing. What am I doing wrong?
但是当我在 iPhone 上测试时它不起作用。我试过改变尺寸并使用纵向/横向功能，但仍然没有。我究竟做错了什么？
采纳答案by mikedugan
I always call mine when I link the CSS in the head of the HTML.
当我在 HTML 的头部链接 CSS 时，我总是调用我的。
An example from a current page I'm working on:
我正在处理的当前页面的一个示例：
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />
This selects the CSS doc that will be loaded right from the start instead of selecting styles after the CSS document is loaded (reduces number of HTTP requests)
这将选择将从一开始就加载的 CSS 文档，而不是在加载 CSS 文档后选择样式（减少 HTTP 请求的数量）
When doing this within the CSS document itself, you should generally replace max-device-widthwith max-width.
在 CSS 文档中执行此操作时，通常应替换max-device-width为max-width.
回答by David Taiaroa
Check that you have
检查你是否有
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the head of your doc
在你的文档的头部
Good luck
祝你好运
回答by Shlomi Komemi
use "max-width"instead of "max-device-width"which is fixed per device.
使用“max-width”而不是每个设备固定的“max-device-width”。
回答by San
this is a samples media query css
这是一个示例媒体查询 css
/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
your css here
}
/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
your css here
}
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
your css here
}
Hard to understand as you have not provided the code..but the common mistake people do it by not adding this meta data
难以理解，因为您没有提供代码......但是人们通过不添加此元数据来实现的常见错误
<meta name="viewport" content="width=device-width, initial-scale=1">
回答by Romain Braun
I'm not sure but I think the max-device-widthof an iphone is 640px. Give it a try.
我不确定，但我认为max-device-widthiphone 是 640px。试一试。
回答by Parfait
@media only screen and (min-width : 480px) {
}
It seems to work fine in both Android and iPhone.
它似乎在 Android 和 iPhone 中都能正常工作。
