30

デフォルトでは、body 要素に緑色の境界線を付けたいと考えています。Retina ディスプレイをサポートするデバイスで、最初にサイズを確認したい。iPadでは体に赤い境界線を付けたいし、iPhoneでは青い境界線を付けたい. しかし、次のようにメディア クエリをネストすることはできません。

body { border: 1px solid green; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
   @media (max-width: 768px) and (min-width: 320px) {
      body { border: 1px solid red; }
   }
   @media (max-width: 320px) {
      body { border: 1px solid blue; }
   }
}
4

2 に答える 2

30

andいいえ。演算子を使用して、それを 2 つのクエリとして記述する必要があります。ただし、これは SCSS で行うことができます。これは CSS にコンパイルされますが、展開して演算子を使用することでそれらを結合しますand。

これはよくある問題で、LESS や SCSS を初めて書いたときは、このような長い文章を書くことに戻りたくありませんでした。

ロングハンド CSS:

@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) and (min-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 768px) and (min-width: 320px) {
  body {
    border: 1px solid red;
  }
}
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 320px) {
  body {
    border: 1px solid blue;
  }
}

クエリのネストは機能する場合がありますが、サポートはブラウザーによって異なります。

于 2013-04-19T21:58:18.220 に答える