Question

对于240px的浏览器大小，我有最大宽度：241px，但是当浏览器大小为240px而不是max-width：420xpx被调用时，不会调用此媒体查询。

如何解决这个问题？ Link，此处是Mobile emulator

的链接

@media only screen and (max-width:241px){
.home-header-div{ height: 750px !important; }
}

而不是

@media screen and (max-width:420px)

Answer 1

当浏览器大小为240px时，将调用240，因为您已为其定义了规则。媒体查询将采用范围，如果您定义了类似的范围，那么它将采用最后一个定义..

body {
    background-color:lightgreen;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}
@media only screen and (max-width: 490px) {
    body {
        background-color:red;
    }
}

在此示例中，颜色仅为10px范围内的蓝色

Answer 2

240小于241和420，因此它符合两种媒体查询的标准。这意味着如果在两个媒体查询中将相同的属性应用于相同的元素，则将使用使用具有最高specificity的选择器应用的属性。如果两个选择器具有相同的特异性，则 C SS的级联规则将启动，并且将使用最后声明的属性。

如果没有看到您的媒体查询420px，我只能假设后者是您的问题的原因。有两个解决方案，使用将取决于您自己的需求;将媒体查询放置在241px之前的420px之前，如下所示：

@media only screen and (max-width:420px){/* styles go here*/}
@media only screen and (max-width:241px){/* styles go here*/}

或者，在您的420px查询中添加min-width，如下所示：

@media only screen and (max-width:240px){/* styles go here*/}
@media only screen and (min-width:241px) and (max-width:420px){/* styles go here*/}

注意上面我如何将第一个查询中的max-width更改为240px，并在第二个查询中将min-width用于241px; max-width表示窗口宽度必须小于或等于提供的宽度，min-width表示窗口必须大于或等于提供的宽度。因此，宽度为240像素的窗口将与max-width:240px匹配。并且，通过使下一个媒体查询的min-width大1px，您可以避免重新创建原始问题的任何令人讨厌的重叠。

最大宽度241px无法在最小的浏览器大小

2 个答案: