Neue Syntax für Bereichsmedienabfragen

Hier erfahren Sie, wie Sie mit dieser neuen Syntax Media Queries optimieren können.

Rachel Andrew

Medienabfragen ermöglichen responsives Design und die Bereichsfunktionen, mit denen die minimale und maximale Größe des Darstellungsbereichs getestet werden können, werden von etwa 80% der Websites verwendet, die Medienabfragen verwenden. Die Spezifikation für Medienabfragen der Ebene 4 enthält eine verbesserte Syntax für diese Bereichsabfragen.

Unterstützte Browser

Quelle

Die folgenden Beispiele zeigen, wie Sie Ihre Abfragen optimieren können.

Ein typischer Medienabfragetest für eine minimale Breite des Darstellungsbereichs würde so aussehen:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Die neue Syntax ermöglicht die Verwendung eines Vergleichsoperators:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

So testen Sie eine maximale Breite:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

Und die Version mit der Syntax der Ebene 4:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

Mit dieser Syntax lassen sich Abfragen optimieren, insbesondere wenn zwei Breiten verglichen werden. Im folgenden Beispiel wird mit der Medienabfrage nach einem Darstellungsbereich mit einer Mindestbreite von 400 Pixeln und einer maximalen Breite von 600 Pixeln gesucht.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

Dies kann in der neuen Syntax wie folgt umgeschrieben werden:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

Die Funktion, die Sie testen, in diesem Fall width, befindet sich zwischen den beiden Werten.

Die neue Syntax ist nicht nur prägnanter, sondern auch genauer. Die Abfragen min- und max- umfassen die angegebenen Werte. min-width: 400px prüft beispielsweise auf eine Breite von mindestens 400 Pixeln. Die neue Syntax macht es möglich, deutlicher zu sagen, was Sie meinen, und verhindert, dass es bei Suchanfragen zu Konflikten kommt.

Wenn Sie die neue Bereichssyntax verwenden möchten, aber auch Browser berücksichtigen möchten, die sie noch nicht implementiert haben, gibt es ein PostCSS-Plug-in, das die neue Syntax in Ihren Stylesheets in die alte umschreibt.