未在定義的寬度觸發 CSS 媒體查詢

Question

CSS 媒體查詢不是以定義的寬度觸發，而是從下一個更高分辨率的媒體查詢觸發。

例如，從 959 像素到 974 像素的寬度應該是 730 像素，但最終是 950 像素......與另一個特定寬度 1145 到 1183 相同的問題最終采用了媒體查詢之外提到的更大的最大寬度而不是 950 像素，兩個它失敗的特定地方。

.cwidth{
    max-width:1147px;
    padding-left:0px;
    padding-right:0px;
}
@media screen and (min-width: 754px) and (max-width:975px){
    .cwidth{
        max-width:730px !important;
    }
}
@media screen and (min-width: 976px) and (max-width:1183px){
    .cwidth{
        max-width:950px !important;
    }
}

（我已經在樣式表的底部寫了查詢，確保我沒有元素的內聯樣式，也嘗試過沒有 !important 標簽。）

需要的結果

但我得到的結果

Answer 1

嘗試這個：

  @media (min-width: 754px) and (max-width: 975px) {
    .cwidth{
      max-width:730px;
    }
  }
  @media (min-width: 976px) and (max-width: 1183px) {
    .cwidth{
      max-width:950px;
    }
  }

Answer 2

嘗試先使用 max-width 然后使用 min-width

並且不需要使用!important屬性

.cwidth{
    max-width:1147px;
    padding-left:0px;
    padding-right:0px;
}
@media screen and (max-width: 1183px) and (min-width: 976px) {
    .cwidth {
        max-width: 950px;
    }
}
@media screen and (max-width: 975px) and (min-width: 754px) {
    .cwidth {
        max-width: 730px;
    }
}

Answer 3

當我只是增加到一個特定的間隔時，它似乎工作得很好，比如我在下面提供的代碼而不是我之前給出的間隔：

.cwidth{
    max-width:1147px;
    padding-left:0px;
    padding-right:0px;
}
@media (min-width: 754px) and (max-width:993px){
    .cwidth{
        max-width:730px;
    }
}
@media (min-width: 992px) and (max-width:1199.5px){
    .cwidth{
        max-width:950px;
    }
}

（我只是不斷增加間隔，直到它完美對齊。）