css - 最大宽度 241px 不适用于最小的浏览器尺寸

Question

我有 max-width:241px 用于 240px 浏览器大小，但是当浏览器大小为 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 范围内变成蓝色