Media Queries – @media-Regel

CSS Media Queries oder Media Regel

Media Queries fragen Eigenschaften des Monitors ab, um sowohl mobilen Geräten als auch großen Desktop-Monitoren entgegenzukommen. Media Queries kombinieren CSS-Eigenschaften mit logischen Abfragen nach Eigenschaften von Geräten.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Wie groß ist der Monitor?

Media Queries legen in erster Line je nach Höhe, Breite oder Orientierung (Portrait oder Landscape) des Viewports oder Browserfensters CSS-Eigenschaften fest. In den geschweiften Klammern der @media-Regeln stehen nur die CSS-Eigenschaft, die bei Eintreten der Bedingung eingesetzt werden.

@media (min-width: 480px) {
	main { width: 89%; }
}

Die Browser verstehen Abfragen (Queries) nach der Größe, der Ausrichtung und Auflösung des Monitors bzw. des Browserfensters.

Einfache Abfrage nach der Breite des Viewports
/** Kleine Monitore: Inhalte sequentiell **/
.gridcontainer {
	display: grid;
	font-family: sans-serif;
}


/** Mittelgroße Monitore: Inhalte in zwei Spalten **/
.@media (min-width: 720px) {
	.gridcontainer {
		grid-template-areas: "area1 area2"
							"area3 area4"
							"area5 area6";
	}
}

/** Mittelgroße Monitore: Inhalte in drei Spalten **/
@media (min-width: 1160px) {
	.gridcontainer {
		grid-template-areas: "area1 area1 area1"
							"area2 area3 area4"
							"area5 area5 area4"
							"area6 area6 area4";
	}
}

Und das ist Schema F der responsive Webseiten: Auf den kleinsten Monitoren liegen die Inhalte linear und ohne Positionierung untereinander. Webseiten sind schon von Haus aus responsiv, solange das CSS die Elemente nicht positioniert. Erst das CSS für größere Monitore positioniert Blöcke von Elementen nebeneinander.

Media Queries fragen nicht nur nach der Auflösung, Größe und Ausrichtung des ViewPorts, sondern z.B. auch nach Tageslicht- bzw. Nachtmodus des Besuchers:

@media (prefers-color-scheme: dark) {
	body {
		background-color:#324232;
	}
}

nach dem Ausgabemedium

@media print {
	body {
		font-size: 14pt;
	}
}

ob das Gerät hovern unterstützt (ein »Pointer Device« ist)

@media (hover: hover) {
	body {
		color: darkslategray;
	}
}

Media-Regel und Breakpoints

Eine @media-Regel legt einen Breakpoint fest – ein Bruchpunkt oder eine Bedingung, an dem sich das Layout ändert, um sich besser an eine Geräteklasse anzupassen. CSS-Eigenschaften, die nicht innerhalb einer @media-Regel stehen, gelten für alle Geräteklassen und zielen in erster Linie auf die kleinsten Geräte (zumeist auf Smartphones) ab. Von hier aus legen weitere Breakpoints die CSS-Eigenschaften für größere Viewports fest.

Media Queries überschreiben nur die Eigenschaften, die sich bei einem Breakpoint ändern oder neu hinzukommen.

Ein responsives Design passt sich nicht nur an die Monitore von Smartphones an, sondern bringt für unterschiedliche Browserfenster (Viewports) ein abgestimmtes Design: Mehrwert für große Monitore und ein kompaktes Design für kleine Browserfenster.

Aufbau von Media Queries – @media-Regel

Media Queries: Geräteklassen für Smartphones, Notebooks, Tabletts und große Monitore
Wir stehen vor einem großen Spektrum von Monitorgrößen und Auflösungen: Das sind die Geräteklassen.

Um individuelle CSS-Regeln für unterschiedliche Geräteklassen aufzubauen, wird in das media-Attribut im link-Tag für die CSS-Datei eine Abfrage nach Eigenschaften des Geräts eingesetzt.

<link rel="stylesheet" href="desktop.css" type="text/css"
media = "[ not | only ] screen [ and ] (expression)" />
Beispiel: Laden der CSS-Datei
<link rel="stylesheet" media="all" href="cssbase.css" />
<link rel="stylesheet" media="(min-width: 672px)" href="csswide.css" />
<link rel="stylesheet" media="(orientation:landscape)" href="landscape.css">
Abfrage in der CSS-Datei
@media only screen and (min-width: 42em) and (max-width: 64em) { 
/* min-width 672px / max-width 1024px */
/* hier vermuten wir Tabletts         */
…
} 

only schützt den Media-Typ vor älteren Browsern und verhindert das Laden der Datei bzw. die Anwendung der Regeln.

Diese CSS-Datei soll nur von modernen Browern geladen werden, und zwar nur dann, wenn der Monitor mindestens 672px Auflösung in der Breite hat.

Geräteklassen filtern

Eine Reihe von Eigenschaften kann so die Geräteklasse filtern:

aspect-ratio (min-aspect-ratio / max-aspect-ratio)
Seitenverhältnis des Viewports
color (min-color / max-color)
Anzahl der Bits eines Ausgabegeräts pro Farbe
color-index (min-color-index / max-color-index)
Zahl der Farben, die ein Gerät darstellen kann
device-aspect-ratio
Deprecated (veraltet) – Seitenverhältnis des Gerätes
device-height
Deprecated (veraltet) – Höhe des Gerätes
device-width
Deprecated (veraltet) – Breite des Gerätes
grid
Ob das Gerät Grid oder Bitmap ist
height (min-height / max-height)
Höhe des Viewports
monochrome
Anzahl der Bits eines Ausgabegeräts pro Graustufe bei monochromen Geräten
orientation
Gilt sowohl für den Desktop-Monitor als auch für mobile Geräte: Wenn der Viewport höher als breit ist, gilt orientation: portrait. orientation: landscape trifft dementsprechend zu, wenn die Breite des Viewports größer als die Höhe des Viewport ist.
resolution (min-resolution / max-resolution)
Auflösung des Geräts in DPI (Dots per Inch) oder DPCM (Dots per Centimeter)
scan
Scan-Technik des Geräts
width (min-width / max-width)
Breite des Viewports

Alle Breiten- und Höhenangaben können durch min bzw. max erweitert werden.

Media Queries im style-Element

Media Queries können an jeder beliebigen Stelle stehen, an der normale CSS-Regeln notiert werden (außer in inline-Stilen):

  • Im Kopf der HTML-Datei in einem style-Element,
  • als externe CSS-Datei, die mit einem link-Tag im head der Seite geladen wird,
  • an jeder Stelle in der regulären CSS-Datei.

Wenn die CSS-Eigenschaften mit dem style-Tag in der HTML-Datei aufgeführt werden, greift die @media-Regel

<style type="text/css" media="screen">
   @media only screen and (device-width:768px) and (orientation:portrait) {
      nav { display:none;}
      … Stile für Viewports mit 768px Breite Hochkant
   }

   … 

   body { width: 980px; margin: 0; padding: 0; }
</style>

Wenn die Frage nach der Größe des Viewports nicht schon beim Laden der Seite beantwortet werden kann, bleibt noch die Abfrage nach der Größe des Browserfensters mit Javascript matchMedia.

Media Queries in der CSS-Datei

Um den Overhead durch das Laden mehrerer CSS-Dateien zu sparen (jede CSS-Datei benötigt einen HTTP-Request), können die CSS-Eigenschaften für Geräteklassen auch innerhalb der Haupt-CSS-Datei mit @media-Regeln geladen werden.

Diese Media Queries legen drei Layout-Typen für unterschiedliche Geräte fest.

…
body { min-width: 920px; background: lavender; width: 920px; margin-left: auto; margin-right: auto; }

@media only screen and (max-width:599px) {
	body {
		width: 320px; font-size: 0.8em; 
	}
}

@media only screen and (min-width:600px) (max-width:920px){
	body { width: 90%;
	}
}

Im Grunde können die die Media Queries direkt hinter jedem Stil sitzen, der für die Geräteklasse überschrieben werden soll. Das wirkt schnell unübersichtlicht. Effizienter ist es, die Medie Queries in Gruppen zu bündeln.

Am Ende der CSS-Datei liegen die Media Queries auch gleichzeitig unten in der CSS-Kaskade. Wenn die Webseite einmal extrem langsam eintrudelt, verhindern Gruppen von Media Queries, dass der Besucher mit einem großen Monitor zuerst all die Regeln für kleinere Monitore vorgesetzt bekommt.

Elemente untersuchen

Kommt es zu Konflikten und reagiert der Browser nicht wie vorgesehen, helfen die Entwickler-Werkzeuge der Browser mit Element untersuchen.

Der Viewport der mobilen Geräte

Mobile Geräte tun nur so, als wäre ihre Breite 320 oder 420 Pixel. So behauptet z.B. das iPhone11, das eine physikalische Auflösung von 1.242 × 2.688 Pixel hat, es hätte 412x719 Pixel. So ticken Regina-Monitore: Sie nutzen die dreifachen Zahl von Pixeln auf der Fläche gegenüber Desktop-Monitoren. Tatsächlich aber zoomen die mobilen Geräte die Seite nur aus: Sie verkleinern die Seite, bis ihre Breite vollständig in den kleinen Monitor passt. So hat der Benutzer beim Laden die Seite vollständig im Überblick.

Nicht-responsive Seite auf iPhone11
So sähe die Seite auf dem Handy aus, wenn sie nicht responsiv wäre:
Bilder wie Briefmarken, Texte unleserlich klein.