CSS 媒体查询最小宽度无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16681054/
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 min-width not working correctly
提问by Tuan
I have a HTML like:
我有一个像这样的 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Code: NewYork</title>
<link rel="stylesheet" href="test.css" />
</head>
<body data-ng-app="us">
<input type="text" />
</body>
</html>
and my CSS is:
我的 CSS 是：
input {
background-color: red;
}
/* ---- Desktop */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
input {
background-color: green;
}
}
now the CSS applies when the window is at 909px width. Obviously not a scrollbar problem. I am getting nuts with this simple problem. I tested it with Chrome and IE10 both the same.
现在当窗口宽度为 909px 时应用 CSS。显然不是滚动条问题。我被这个简单的问题搞疯了。我用同样的 Chrome 和 IE10 测试了它。
Can anybody please help what I am doing wrong here?
有人可以帮助我在这里做错什么吗？
采纳答案by Leniel Maccaferri
I used this HTML:
我使用了这个 HTML：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Code: NewYork</title>
</head>
<body data-ng-app="us">
<input type="text" />
</body>
</html>
With a simpler media query declaration like this one:
使用这样一个更简单的媒体查询声明：
@media (min-width: 1000px) and (max-width: 1200px) {
input {
background-color: green;
}
}
It's working great here: http://jsbin.com/ubehoy/1
它在这里工作得很好：http: //jsbin.com/ubehoy/1
Debugging with Firefox Responsive Design Viewand dragging the resizer, it changes the input background color correctly when the width limits are reached.
使用Firefox 响应式设计视图进行调试并拖动调整器，它会在达到宽度限制时正确更改输入背景颜色。
Tried with Chrome 26.0.1410.64 m/IE 10 and it's working great too.
在 Chrome 26.0.1410.64 m/IE 10 上尝试过，效果也很好。
回答by Zach Parduhn
I have had this happen to me from time to time. Make sure your tab is not zoomed in (?0)
我不时发生这种情况。确保您的标签没有放大 (?0)
回答by Victor
@media (min-width: 1000px) and (max-width: 1200px) {
input {
background-color: green;
}
}
This works, but make sure you check the zooming. (I got this answer from the comments, as it seems this is the big catch around here.. I fell for it too)
这有效，但请确保您检查缩放。（我从评论中得到了这个答案，因为这似乎是这里的一大亮点......我也爱上了它）
