Media Queries – @media-Regel und Breakpoints

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.

/** 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

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)" />

<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">

@media only screen and (min-width: 42em) and (max-width: 64em) { 
/* min-width 672px / max-width 1024px */
/* hier vermuten wir Tabletts         */
…
} 

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 Viewport-Größen fest.

body {
	background: red;
	color: green;
}

@media (max-width: 340px) {
  body {
  	background: yellow;
  }
}

@media (min-width: 341px) and (max-width: 600px) {
  body {
  	background: blue;
  	color:white;
  }
}

Kleine ViewPorts haben einen gelben Hintergrund, mittlere ViewPorts einen blauen Hintergrund, alle anderen einen roten.

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.

Neue Schreibweise für Media Queries

body {
	background: red;
	color: green;
}
@media (width <= 340px) {
  body {
  	background: yellow;
  }
}

@media (341px <= width <= 600px )  {
  body {
  	background: blue;
  	color:white;
  }
}

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.