css - 宽度不响应媒体查询

Question

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

编码：

#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 这里，当可用空间宽度小于 480px 时会应用黑框

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

因此，您的#box 默认为 100% 宽度，除非可用空间大于 480 像素。你的代码工作正常。

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

Answer 2

我认为您的媒体查询错误。正如你现在所拥有的，它改变了超过480 像素的内容。我认为你希望它低于 480 像素。

所以应该是：

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

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

示例小提琴

Answer 3

我//偶然使用 CSS 不支持的语法对代码进行了注释，因此该注释行下方的代码不起作用。在我改变它/**/的语法后它现在可以工作了。