Question

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

代码：

#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 here是你的代码，最小宽度：480px。它适用于可用空间大小大于480px（黑匣子）

的情况

尝试 max-width 。当可用屏幕空间小于480像素时，将应用此上下文。 jsFiddled here，当可用空间宽度小于480px

时，将应用黑框

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

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

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

Answer 2

我认为您的媒体查询有误。正如您现在所做的那样，它会将内容更改为 480px。我觉得你想要它在480px以下。

所以它应该是：

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

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

<强> Example fiddle

Answer 3

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

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

3 个答案: