CSS, HTML und Javascript mit {stil}

Media Queries – @media-Regel

CSS Media Queries – @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.

CSS @media-Regeln legen je nach Höhe, Breite oder Orientierung (Portrait oder Landscape) des Viewports unterschiedliche CSS-Eigenschaften für Gerätetpyen fest.

Die modernen Browser (ab IE9) verstehen Abfragen (Queries) nach der Größe, der Ausrichtung und Auflösung des Monitors oder Browserfensters. Wer responsive Webseiten entwickelt, die auf Smartphones und Tablets ein barrierefreies Design zeigen, braucht sich um Internet Explorer 6, 7 und 8 nicht zu kümmern. Auf den mobilen Geräten gibt es keine alten Internet Explorer.

.topmenu li { 
    background: hsl(350,50%,50%); 
    width: 49%; 
    font-size: 1.2em;
    box-sizing: border-box; 
    text-align: center;
}
	
@media only screen and (min-width: 680px) {
    .topmenu li { 
        width: 24%; 
        height: 120px; 
        font-size: 1.4em; 
	}
}

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

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-Tag,
  • 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

Viele mobile Geräte tun nur so, als wäre ihre Breite 980 Pixel. So z.B. das iPhone – das eine physikalische Auflösung von 640x960 hat, aber in der Media Querie behauptet, es hätte 320x480 Pixel. 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.

Der Viewport der mobilen Geräte ist meistens größer als der Screen. Hier zwingt meta den Viewport auf Screengröße.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width heißt "Nicht zoomen!". Der Rest ist optional.

meta name="viewport" content="width=device-width" setzt die Breite des Screen bei mobilen Geräten auf die tatsächliche Auflösung in der Breite. Meta content="viewport" setzt die Breite auf die tatsächliche Breite. initial-scale verhindert das Zoomen beim Laden der Seite. Am Ende verhindert user-scalable="no", dass der Benutzer die Seite vergrößert oder verkleinert.

<meta name="viewport" content="width=device-width, 
    initial-scale=1.0, 
    maximum-scale=1.0, 
    user-scalable=no">

Einen Viewport haben wir auch auf dem Monitor des Computers: Das Browserfenster ist der Viewport. Auf den Monitor des Computers ist der Viewport unabhängig von der Größe des Monitors und wir können das Browserfenster beliebig aufziehen oder verkleinern.