Was passiert, wenn sich mehrere CSS-Medienabfragen überschneiden?

Überschneidung von Medienabfragen: Cascade Reigns Supreme

Was passiert, wenn mehrere Medienabfragen mit derselben Ansichtsfenstergröße übereinstimmen? Die Antwort liegt in den Kernprinzipien von CSS: Kaskade und den Überlappungsregeln.

Kaskade in Aktion

@media-Regeln folgen der Kaskade genau wie normale CSS-Regeln. Wenn mehrere @media-Regeln übereinstimmen, werden alle übereinstimmenden Stile angewendet und die Kaskade löst alle Konflikte. Mit anderen Worten, die zuletzt deklarierte, spezifischste Stilregel gewinnt.

Überlappung an Haltepunkten

Bei genau 20em und 45em werden Ihre ersten und zweiten Medienabfragen und Ihre zweite bzw. dritte Medienabfrage wird übereinstimmen. Browser wenden Stile aus beiden Regeln an und kaskadieren entsprechend. Bei widersprüchlichen Deklarationen hat die zuletzt deklarierte Regel Vorrang.

Beispielaufschlüsselung

Bedenken Sie den folgenden Code:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

Bei 20em breit, beide Medienabfragen stimmen überein. Die Kaskade überschreibt display: none mit display: block und float: left gilt für Elemente mit der Klasse .sidebar.

Überlappung durch gegenseitigen Ausschluss vermeiden

Um Überschneidungen zu verhindern Stellen Sie sicher, dass sich Ihre Medienabfragen gegenseitig ausschließen. Denken Sie daran, dass Min- und Max-Inklusivität kennzeichnen. (Mindestbreite: 20em) und (Maximale Breite: 20em) entsprechen beide 20em breiten Ansichtsfenstern.

Gebrochene Pixelwerte

Pixelwerte in CSS sind logische Pixel. Ich konnte keinen Browser finden, der gebrochene Pixelwerte für die Breite des Ansichtsfensters meldet. Safari unter iOS rundet Bruchwerte, um sicherzustellen, dass (maximale Breite: 799 Pixel) oder (minimale Breite: 800 Pixel) mindestens einer Regel entspricht, auch wenn das Ansichtsfenster 799,5 Pixel groß ist.

Das obige ist der detaillierte Inhalt vonWas passiert, wenn sich mehrere CSS-Medienabfragen überschneiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!