html - 错误使响应式设计 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;
}
}

h3 在 320 和 360 宽度中会像在 800 宽度中一样变化。但是如果我去掉800宽度的margin-left，那么320和360宽度的h3就正常了。如果我应该从最大宽度开始进行响应式设计，请提供任何建议？

Answer 1

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

These rules are applied in order from top to bottom; and a duplicate rule will override the previous rule.

例子

1. 320px 选择器将应用font-size、margin-top 和line-height 规则
2. 然后 360px 选择器将覆盖这些规则
3. 然后 800px 选择器将覆盖这些规则并添加额外的 margin 规则。

如何解决您的问题

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

@media (max-width : 360px) {

}

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

}

@media (min-width : 800px) {

}

---

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

Extra small devices [Phones] (<768px)

Small devices [Tablets] (≥768px)

Medium devices [Desktops] (≥992px)

Large devices [Desktops] (≥1200px)