CSS媒体查询最小宽度无法正常工作 [英] CSS Media Query min-width not working correctly
问题描述
我有一个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>
我的CSS是：
input {
background-color: red;
}
/* ---- Desktop */
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
input {
background-color: green;
}
}
现在CSS适用于窗口宽度为909像素。显然不是一个滚动条问题。我遇到这个简单的问题。
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.
任何人都可以帮助我在这里做错了吗？
Can anybody please help what I am doing wrong here?
推荐答案
我使用这个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;
}
}
href =http://jsbin.com/ubehoy/1> http://jsbin.com/ubehoy/1
It's working great here: http://jsbin.com/ubehoy/1
使用
Debugging with Firefox Responsive Design View and dragging the resizer, it changes the input background color correctly when the width limits are reached.
试用了Chrome 26.0.1410.64 m / IE 10，它的工作也很出色。
Tried with Chrome 26.0.1410.64 m/IE 10 and it's working great too.
这篇关于CSS媒体查询最小宽度无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
