CSS - @media 標簽不會覆蓋較小的最大寬度

Question

我正在創建一個小型反應應用程序，並且遇到了 css 問題。

我的 css 以這種通用格式布局

<-->
Shared classes/properties{}
<--->

<--->
@media only screen and (max-width: 991px){}
@media only screen and (max-width: 480px){}
<--->

問題是：當查看手機（例如 iPhone X）時，它使用的是max-width:991px而不是max-width:480px 。

預期的行為是：

• max-width:480應該覆蓋0px-480px
• max-width:991應該覆蓋481px-991px

但是目前， 0px-991px僅使用max-width:991 。

我已經嘗試過(min-width: 0px) and (max-width: 480px)以及它的對應項，但它仍然沒有按預期運行。

我確定我的理解存在差距 - 有人可以指出我做錯了什么嗎？

Answer 1

您沒有發布太多代碼，但是從您發布的內容來看，我會說您需要在兩行的“only screen”和“(max-width: ...)”之間添加“and”一詞：

@media only screen and (max-width: 991px){
  ...
}
@media only screen and (max-width: 480px){
  ...
}

來自 MDN：

and 運算符用於將多個媒體特征組合到一個媒體查詢中，要求每個鏈接的特征返回 true 以便查詢為 true。 它還用於將媒體功能與媒體類型連接起來。

--> 你在這里結合了screen和max-width 。 使用“和”將兩者結合起來。