すべてのブラウザは CSS のネストされた @media ルールをサポートしていますか? 一貫したスタイルを保証するにはどうすればよいですか?

CSS での @media ルールのネスト: ブラウザーのサポートと一貫性

CSS での @media ルールのネストは、ブラウザーのサポートに関して混乱の対象となっています。 「どのブラウザがこの機能をサポートしていますか? 一貫性を確保するにはどうすればよいですか?」という疑問が生じます。

ブラウザ サポート

первоначально、@media ルールのネストはサポートされていませんでした。 CSS2.1。ただし、「条件付きルール」モジュールで説明したように、CSS3 ではこの機能が導入されました。最新のブラウザーは現在、@media at-rules の入れ子を広くサポートしていますが、Microsoft Edge は唯一の例外です。

一貫性

質問で提供されているコードは、入れ子になった @media を示しています。 rules:

@media screen and (min-width: 480px) {

    body{
        background-color:#6aa6cc;
        color:#000;    
    }

    @media screen and (min-width: 768px) {

        body{
            background-color:#000;
            color:#fff;    
        }
    }
}

CSS3 では、このコードは意図したとおりに動作し、それに基づいて適切なスタイルが適用されます。指定されたメディアクエリ。 Firefox と他のブラウザーの間の不一致は、Firefox が CSS3 仕様を実装しているのに対し、他のブラウザーは依然として古い CSS2.1 標準に準拠しており、ネストされた @media ルールが許可されていないために発生します。

回避策

すべてのブラウザ間で一貫性を確保するには、次の使用を検討してください。アプローチ:

@media screen and (min-width: 480px) {
    body {
        background-color: #6aa6cc;
        color: #000;
    }
}

@media screen and (min-width: 768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}

ネストを削除すると、すべての主要なブラウザで CSS3 が完全に実装されるまで、コードはすべてのブラウザで一貫して動作します。

以上がすべてのブラウザは CSS のネストされた @media ルールをサポートしていますか? 一貫したスタイルを保証するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。