Question

我一直在努力理解为什么当我扩展FF，IE，CHROME时，他们都没有抓住我的网站媒体查询，这被认为是响应。虽然当我将它加载到我的iPhone时，它就像我设计的那样。

我的css就是这样..

CSS

.css goes up here for all devices such as body, header, content, etc

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) 
{
    .here goes the css for all devices between 320px and a max of 1024px; 
    using percentages
}

正如我上面提到的，如果我将它加载到我的手机（safari）中移动版本正确加载，在iPhone和Android上我已经测试但是如果我扩展我的浏览器它不会改变任何东西，这是正常的css以上媒体查询。

这也在我的标题中..

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Answer 1

因为css中的注释应该如下所示：

/* this */

你的代码说：

.css goes up here for all devices such as body, header, content, etc

查找一类css，并尝试为其找到规则。

接下来，使用

min-device-width

这意味着要检查设备的宽度，而不是视口的宽度。你可能想要：

min-width

所以你想要的可能是：

/* css goes up here for all devices such as body, header, content, etc */

@media only screen and (min-width: 320px) and (max-width: 1024px) 
{
    /*here goes the css for all browser width between 320px and a max of 1024px; 
    using percentages*/
}

Answer 2

我认为问题在于您在媒体查询中使用设备宽度而不仅仅是宽度。下面是一个使用max-width而不是设备宽度的示例，它可以在不使用小型设备的情况下工作： http://jsfiddle.net/cAZPW/1/

当你调整屏幕宽度时，我只有一个div改变颜色：

.full-size {
  height: 100%;
  width:100%;
  background-color: red;
}
@media screen and (max-width: 500px){
  .full-size {
    background-color:green;
  }
}

浏览器缩放时为什么忽略@media查询？

2 个答案: