2つのメディアクエリが同じ宣言でミキシングされていますが、1つはipadで、もう1つはデスクトップです。

Question

2つのメディアクエリがあり、両方とも箇条書きリストのliタグで使用されています。問題は、すべてのnth-child（2n + 1）とnth-child（3n + 1）が実行されていることを明確にしていますが、クロムデバイスビューでデバッグするときに同じページで両方が使用されています。したがって、グリッドは曲がって2n + 1と3n + 1ごとに壊れます。私はクエリを再注文しようとしましたが、私はまだ結果を得られません。これはポートレートビューで行われています。

@media only screen 
and (min-width: 768px) 
and (max-width: 1024px) { 
    #products-list li:nth-child(3n+1) {  
     clear: left; 
    } 
} 


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2) { 

    #products-list li:nth-child(2n+1) {  
     clear: left; 
    } 
} 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 2) { 

    #products-list li:nth-child(3n+1) {  
     clear: left ; 
    } 
} 

Answer 1

あなたの3つのコードブロックが何をするのかを分析しましょう。

まずブロック（portraitとlandscapeと一致）：3n+1をクリアします。

第2ブロック（一致のみportrait）：2n+1をクリアします。

第3ブロック（一致のみlandscape）：3n+1をクリアします。

気付いた場合、最初のコードブロックは、条件がすべてportraitとlandscapeの両方の方向に一致するため、3番目のコードブロックのすべての作業を既に完了しているため、望ましくない結果が生じます。

実行の重複を防ぐためにここで行うことができるのは、このコードが明示的にどの要素に適用されているかを明示していることです。メディアクエリもネストすることができます。

@media only screen 
and (min-width: 768px) 
and (max-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) { 
    @media only screen and (orientation : portrait){ 
     #products-list li:nth-child(2n+1) {  
      clear: left; 
     } 
    } 
    @media only screen and (orientation : landscape){ 
     #products-list li:nth-child(3n+1) {  
      clear: left; 
     } 
    } 
} 

別の単純けどかさばる方法は、あなたが唯一の次を残して、最初のコードブロックを削除することです：タッチ入力を検出するために：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2) { 

    #products-list li:nth-child(2n+1) {  
     clear: left; 
    } 
} 

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 2) { 

    #products-list li:nth-child(3n+1) {  
     clear: left ; 
    } 
}