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

Question

これは可能ですか？それは私にとってすてきな解決策のようですが、うまくいくかどうかは分かりません。

@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 */ 

    } 

} 

Answer 1

あなたはnest @media rules this way in CSS3にできるはずですが、ほとんどのブラウザではまだサポートされていません。詳細はthis answerを参照してください。

それはブラウザ間で動作するように（と私は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 */ 

} 

Answer 2

をこれを実行したかったのは、リンクタグで高水準のメディアクエリを使用し、次にリンクされたシート内で他のクエリを使用することです。

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

Answer 3

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; 
    } 
}