余分な角括弧が単純なメディアクエリを失敗させます

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)) { ... } 

ターゲットプラットフォームは、Android 5.1の最新クロームですが、私は聞いて開いている：余分な外のブラケットを追加すること

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

、これが失敗します他のプラットフォームのコメントもあります。

Answer 1

これは、どのような動作に近づく必要があるかによって異なります。あなたは、メディアクエリのルールの両方を適用する場合は、あなたがのためのルールのいずれかを適用する場合はand論理演算子

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

を使用する必要があり、これらの規則のために

をandかorが必要かどうかメディアクエリ、あなたはコンマを使用する必要があります。

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