CSS媒體查詢-最小設備寬度和最大設備寬度

Question

我在為特定設備添加CSS時遇到問題。

我在以下兩個模擬器上運行了我的應用程序：

1. 寬度：320高度：500
2. 寬度：320高度：588

現在，我的問題是，始終使用的CSS是第二個CSS：320 x588。我相信是因為它符合min-device-width 320 。 那么，如何將第一個CSS 320x500與寬度為320，高度為500的設備一起使用？

我不太熟悉min-device-width和max-device-width 。

/ * IOS ----------- * /

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 500px) {
   //style here
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 588px) {
   //style here
}

Answer 1

您應該將其重寫為

 @media only screen  and (max-device-width : 320px)

這意味着媒體查詢的觸發分辨率低於320px

而您的其他斷點應類似於：

@media only screen  and (max-device-width : 588px)

如果我的意圖正確的話。 但是在這里搜索了很短時間后，不用說這個問題了，所以在開始復制粘貼答案之前，請快速瀏覽一下此主題

媒體查詢中的“屏幕”和“僅屏幕”有什么區別？

我希望它可以幫助您更好地改善它。 與br paulq