Question

我有一个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;
    } 
}

现在，当窗口宽度为909像素时，CSS会应用。显然不是滚动条问题。我对这个简单的问题感到困惑。我用Chrome和IE10测试了它们。

任何人都可以帮助我在这里做错了吗？

Answer 1

我使用了这个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>

使用更简单的媒体查询声明，如下所示：

@media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

这里工作得很好：http://jsbin.com/ubehoy/1

使用Firefox Responsive Design View进行调试并拖动缩放器，它会在达到宽度限制时正确更改输入背景颜色。

尝试使用Chrome 26.0.1410.64 m / IE 10，它的效果也非常好。

Answer 2

我不时遇到这种情况。确保您的标签未放大（⌘0）

Answer 3

@media (min-width: 1000px) and (max-width: 1200px) {

 input {
        background-color: green;
    } 

}

这样可行，但请务必检查缩放。（我从评论中得到了这个答案，因为这似乎是这里的大问题......我也为此而堕落）

CSS Media Query min-width无法正常工作

3 个答案: