我有一个像这样的
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测试它们都是一样的.
任何人都可以帮助我在这里做错了吗？
解决方法
我用过这个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,它的工作也很棒.
