宽度不会根据媒体查询响应

Question

我正在尝试使用媒体查询来查看效果。 因此， 当窗口最大化但div的宽度保持100% 时，我尝试使用min-width(480px)查询将div的宽度从100%更改为520px 。

编码：

#box {
    margin: auto;
    background: white;
    width: 100%;
}
// Media Queries
@media only screen and (min-width: 480px) {
    #box {
        width: 200px;
        max-width: 200px;
        background: black;
    }
}

所以我的问题是，为什么当窗口最大化时 #box的宽度保持为100% ？
我究竟做错了什么？

Answer 1

这里的jsFiddled是你的代码，最小宽度：480px。 它适用于可用空间大小大于480px（黑匣子）的情况

尝试最大宽度 。 当可用屏幕空间小于480像素时，将应用此上下文。 jsFiddled here ，当可用空间宽度小于480px时，将应用黑盒子

@media only screen and (max-width: 480px) {
    #box {
        width: 200px;
        max-width: 200px;
        background: black;
    }
}

因此，除非可用空间大于480px，否则#box默认为100％宽度。 你的代码工作正常。

也许这是评论： //媒体查询女巫导致错误？

Answer 2

我认为你的媒体查询错了。 正如你现在拥有它，它改变了 480像素的内容。 我觉得你想要它在480px以下。

所以它应该是：

@media only screen and (max-width: 480px) {
  //code
}

因此， ( max -width: xxx)不是， ( min -width: xxx) 。

示例小提琴

Answer 3

我偶然使用//语法对代码进行了评论，这在CSS中是不受支持的，因此该评论行下面的代码不起作用。 它现在可以在我更改它/**/语法后工作。