Question

我想让我的网站做出回应，所以我使用@media (max-width:1600px){}这段代码。我正在从最小宽度到最高宽度开始进行响应式设计。

所以首先我以320宽度做出响应：

@media (max-width: 320px) {
.w3l_banner_info1 h3 {
    font-size: 17px;
    margin-top: -10px;
    line-height: 15px;
}
}

然后以360宽度：

@media (max-width: 360px) {
  .w3l_banner_info1 h3 {
  font-size: 20px;
  margin-top: -10px;
  line-height: 18px;
}
}

一切正常，直到我以800宽度进行响应式设计：

 @media (max-width: 800px) {
   .w3l_banner_info1 h3 {
    font-size: 28px;
    line-height: 64px;
    margin-top: -80px;
    margin-bottom: 10px;
    margin-left: 120px;
    margin-right: -100px;
}
}

320和360宽度中的h3将像800宽度一样变化。但如果我删除800宽度的margin-left，那么320和360宽度的h3将是正常的。如果我应该从最高宽度开始做出响应式设计，请帮助任何建议吗？

Answer 1

您提及的问题是，如果@media (max-width: 800px)宽度≤800px，则window规则会匹配，这意味着320px和360px同时适用规则也适用。

这些规则从上到下依次应用;并且重复的规则将覆盖先前的规则。

实施例

320px选择器将应用font-size，margin-top和line-height规则
然后360px选择器将覆盖这些规则
然后800px选择器将覆盖这些规则并添加其他margin规则。

如何解决您的问题

我建议您利用css and运算符更改规则，如下所示 -

@media (max-width : 360px) {

}

@media (min-width : 360px) and (max-width : 800px) {

}

@media (min-width : 800px) {

}

<强>建议：如果您正在寻找经过验证的标准媒体查询示例，请尝试复制Bootstrap 3使用的内容：http://getbootstrap.com/css/#responsive-utilities

超小型设备[电话]（<768px）

小型设备[平板电脑]（≥768px）

中型设备[台式机]（≥992px）

大型设备[台式机]（≥1200px）

Answer 2

如果您正在使用{{1}}，那么请先使用最高宽度。这一切都归结为解析器采用它读取的最后一个规则（与特定媒体查询匹配）。

Answer 3

将max-width:800px放在max-width:360px之后，最后放入max-width: 320px作为降序。

@media (max-width: 800px) {
   .w3l_banner_info1 h3 {
    background-color: blue;
   }
} 

@media (max-width: 360px) {
  .w3l_banner_info1 h3 {
  background-color: green;
  }
}    
@media (max-width: 320px) {
.w3l_banner_info1 h3 {
   background-color: red
  }
}

@media (max-width: 800px) {
   .w3l_banner_info1 h3 {
    background-color: blue;
   }
} 

@media (max-width: 380px) {
  .w3l_banner_info1 h3 {
  background-color: green;
  }
}    
@media (max-width: 360px) {
.w3l_banner_info1 h3 {
   background-color: red
  }
}

<div class="w3l_banner_info1">
       <h3>This is Test</h3>
</div>

注意：使用整页并调整浏览器大小以查看结果。

错误制作响应式设计CSS

3 个答案:

实施例

如何解决您的问题