错误制作自适应设计CSS

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

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

这些规则是按从上到下的顺序应用的； 重复的规则将覆盖之前的规则。

例

1. 320px选择器将应用font-size ， margin-top和line-height规则
2. 然后360px选择器将覆盖这些规则
3. 然后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/#响应实用程序

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

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

中型设备[桌面]（≥992px）

大型设备[桌面]（≥1200px）

Answer 2

如果您使用的是max-width ，那么可以，首先使用最大宽度。 归结为这样一个事实，即解析器采用了它读取的最后一条规则（与特定的媒体查询匹配）。

Answer 3

将max-width:800px放在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> 

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