額外的括號導致簡單的媒體查詢失敗

Question

我剛剛遇到一個奇怪的事情，並想知道這是否是預期的行爲或確實是某種錯誤。

我的意圖是編寫下面的代碼，但我縮小了這個問題（見下文）。

@media only screen 
and (
    (-webkit-min-device-pixel-ratio: 1.2), /* or */ 
    (min-resolution: 120dpi) 
) { ... } 

此代碼：

@media only screen 
and (-webkit-min-device-pixel-ratio: 1.2) { ... } 

增加額外的支架外，此操作失敗：

@media only screen 
and ((-webkit-min-device-pixel-ratio: 1.2)) { ... } 

目標平臺是在Android 5.1最新版的Chrome，但我願意聽也在其他平臺上發表評論。

Answer 1

這取決於您需要採取什麼行爲。無論您需要這些規則

and或or如果你想對媒體查詢規則同時適用，你需要使用and邏輯運算符

@media only screen and (-webkit-min-device-pixel-ratio: 1.2) 
        and (min-resolution: 120dpi) 
{ ... } 

如果你想申請的任何一個規則媒體查詢，則需要使用逗號：

@media only screen and (-webkit-min-device-pixel-ratio: 1.2), 
     only screen and (min-resolution: 120dpi) 
{ ... }