web-dev-qa-db-ja.com

メディアクエリのネスト

デフォルトでは、ボディエレメントに緑の境界線を設定します。 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; }
   }
}
cssresponsive-designmedia-queriesretina-display
28
TK123

いいえ。and演算子を使用して、2つのクエリとして記述する必要があります。ただし、CSSにコンパイルされる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;
  }
}

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

27
cirrus