錯誤制作自適應設計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> 

注意：使用整頁並調整瀏覽器大小以查看結果。