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

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

这意味着正在检查设备的宽度，而不是视口(viewport)的宽度。你可能想要:

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*/
}