css - 无法定位最大宽度 360px

Question

我正在开发响应式网站。 Logo 图像大小会随着不同屏幕尺寸设备的变化而变化

html部分

<div class="logo responsive-img">
    <img id="logo-header" src="assets/img/logo2.png" alt="logo" />
</div>

媒体CSS

@media (max-width: 360px) {
    /*Logo*/
    .responsive-img {
       background-image: url(../img/logo-320.png);
       width:200px !important;
       height:28px !important;
    }
    .responsive-img img {
            display:none;
    }
}

@media (max-width: 480px) { 
            /*Logo*/
    .responsive-img {
       background-image: url(../img/logo-mobile.png);
       width:300px !important;
       height:42px !important;
    }
    .responsive-img img {
            display:none;
    }
}

我在本地桌面浏览器、chrome 和 firefox 上测试过。当浏览器调整为 480 时， Logo 图像将被替换。然而，当浏览器继续调整到 360 时， Logo img 不会改变。

Answer 1

简答

将 480 像素的媒体移动到 360 像素的媒体之上。

长答案

那是因为在 css 中出现的顺序很重要。如果两个规则具有相同的特异性并且它们都定义了相同的属性，则后一个将覆盖前一个。

.apple {
    color:red;  //this gets applied first
}

.apple {
    color:blue;  //this gets applied second, which overrides the first
}

这同样适用于媒体查询。在您的情况下，您定义的所有属性和规则都是相同的。

它在 360px 以上有效，因为 360px 媒体不会被应用而 480px 媒体会应用。

您的 360 像素媒体在 360 像素下确实有效。碰巧你的 480px 媒体紧随其后并且也被应用，因为屏幕宽度实际上小于 480px。因此 480 像素媒体将覆盖 360 像素媒体定义的相同属性。