Question

我正在开发一个快速响应的网站。徽标图像大小将在不同的屏幕尺寸设备上发生变化

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时，徽标图像被替换。但是，当浏览器继续调整为360时，徽标img不会改变。

Answer 1

简短回答

将480px媒体移到360px媒体上方。

答案很长

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

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

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

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

它工作在360px以上，因为360px媒体没有应用，而480px媒体也没有。

您的360px媒体可以360px运行。只是碰巧你的480px介质跟在它之后并且也被应用，因为屏幕宽度实际上小于480px。因此，480px媒体将覆盖360px媒体定义的相同属性。

无法以最大宽度360px为目标

1 个答案: