Unterstützen alle Browser verschachtelte @media-Regeln in CSS und wie können wir ein einheitliches Styling sicherstellen?

Verschachtelung von @media-Regeln in CSS: Browserunterstützung und Konsistenz

Die Verschachtelung von @media-Regeln in CSS sorgte hinsichtlich der Browserunterstützung für Verwirrung . Es stellt sich die Frage: „Welche Browser unterstützen diese Funktionalität und wie können wir Konsistenz sicherstellen?“ CSS2.1. Mit CSS3 wurde diese Funktion jedoch eingeführt, wie im Modul „Bedingte Regeln“ beschrieben. Moderne Browser unterstützen jetzt allgemein die Verschachtelung von @media at-Regeln, mit Ausnahme von Microsoft Edge.

Konsistenz

Der in der Frage bereitgestellte Code weist verschachtelte @media auf Regeln:

In CSS3 sollte dieser Code wie vorgesehen funktionieren, wobei die entsprechenden Stile basierend auf den angegebenen Medienabfragen angewendet werden. Die Diskrepanz zwischen Firefox und anderen Browsern entsteht, weil Firefox die CSS3-Spezifikation implementiert hat, während andere Browser immer noch dem älteren CSS2.1-Standard entsprechen, der keine verschachtelten @media-Regeln zulässt.

Workaround

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

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

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

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

Um die Konsistenz in allen Browsern sicherzustellen, sollten Sie den folgenden Ansatz in Betracht ziehen:

Durch Entfernen des Durch die Verschachtelung verhält sich der Code in allen Browsern konsistent, bis CSS3 vollständig in allen gängigen Browsern implementiert ist.

Das obige ist der detaillierte Inhalt vonUnterstützen alle Browser verschachtelte @media-Regeln in CSS und wie können wir ein einheitliches Styling sicherstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!