web-dev-qa-db-ja.com

メディアクエリ内にメディアクエリをネストすることは可能ですか？

これは可能ですか？それは私にはきちんとした解決策のように思えますが、それがうまくいくかどうかはわかりません。

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

    /* Code for both portrait and landscape */

    @media (orientation:portrait) {

        /* Code for just portrait */

    }

    @media (orientation:landscape) {

        /* Code for just landscape */

    }

}
cssmedia-queries
28
SparrwHawk

あなたはできるはずです ネスト@media CSS ​​ではこのようにルール化されていますが、ほとんどのブラウザではまだサポートされていません。詳細については、 この回答 を参照してください。

ブラウザ間で機能するためには、内部ルールのトップレベルのメディアクエリを完全に拡張して繰り返す必要があります（SCSSプロセッサが同様のものを生成すると思います）。

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) {
    /* Code for both portrait and landscape */
}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: portrait) {

    /* Code for just portrait */

}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: landscape) {

    /* Code for just landscape */

}
30
BoltClock

これを実行したい場合は、リンクタグで高レベルのメディアクエリを使用してから、リンクされたシート内の他のクエリを使用するのが最善の方法です。

実際には、ほとんどの人は、一般的なものをカバーするベースシートからCSSルールをカスケードし、各メディアルールセットに変更を加えます。

2
Richard Hulse

不可能だと思いますが、SASS cssプリプロセッサを使用している場合は、この形式を記述できます。

たとえば、このコードをコピーして https://www.sassmeister.com/ -に貼り付け、出力を確認できます。

[〜＃〜] sass [〜＃〜]

@media only screen and (max-width: 767px) {
  body{
    color:red;
  }
   @media (orientation:portrait) {
       body{
        color:green;
      }
   }
   @media (orientation:landscape) {
       body{
        color:orange;
      }
   }
}

出力CSS

@media only screen and (max-width: 767px) {
  body {
    color: red;
  }
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
  body {
    color: green;
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
  body {
    color: orange;
  }
}
1
ShibinRagh