錯誤的媒體查詢觸發對iPhone 6

Question

我有2個mediaqueries：

@media only screen and (max-width: 550px), (max-height: 550px) and (min-device-width: 500px) 

和

@media only screen and (max-width: 550px), (max-height: 550px) and (min-device-width: 800px) 

爲什麼最後一個覆蓋的第一個？肖像中iphone 6的最小設備寬度不是800px，對吧？

我還試圖最小寬度，而不是最小設備寬度

Answer 1

逗號是一個OR參數。這意味着在這種情況下，只要max-width: 550px爲真，設備就不會關心以下參數。

刪除逗號並將其替換爲and應該有所斬斷。

Answer 2

就像KittMedia所說的，你應該用逗號「」替換逗號，這樣兩個語句纔會被執行。

實施例：

@media only screen and (max-width: 550px) and (max-height: 550px) and (min-device-width: 800px) { 
    p {display: none} 
} 

<p>This will disappear on an iPhone 6</p>