CSS, HTML und Javascript mit {stil}

Media Queries für iPhone, Tablet, Monitor

CSS Media Queries

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.

Sie legen je nach Höhe, Breite oder der Orientierung (Portrait oder Landscape) des Monitors unterschiedliche CSS-Regeln für Gerätetpyen fest.

Die modernen Browser verstehen Abfragen (Queries) nach der Größe des Monitors oder Browserfensters. Internet Explorer bleibt bis einschl. Version 8 außen vor.

Wer responsive Webseiten entwickelt, die auch 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 keinen alten Internet Explorer.

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

Nur die Eigenschaften, die sich bei einem Breakpoint ändern oder neu hinzukommen, werden überschrieben.

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

Aufbau von Media Queries

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

only soll den Media-Typ vor älteren Browsern schützen

@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
/* min-width 641px / 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 720px Auflösung in der Breite hat.

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

widthcolor
device-widthmonochrome
heightcolor-index
device-heightresolution
orientationscan
aspect-ratiogrid
device-aspect-ratio

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 im style-Tag im header 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 Geräte mit 768px Breite Hochkant gehalten
   }

   … 

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

Im Style-Tag kann auch eine externe CSS-Datei mit der @import-Regel geladen werden.

<style type="text/css" media="screen">
   @import url("iPad.css"); 
   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 einer @media-Regel 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 (min-width:600px) (max-width:920px){
	body { width: 90%;
	}
}
@media only screen and (max-width:599px) {
	body {
		width: 320px; font-size: 0.8em; 
	}
}

Im Grunde könnten die die Media Queries direkt hinter jedem Stil sitzen, der für die Geräteklassen überschrieben werden soll. Das würde allerdings ganz schön unübersichtlicht. Effizienter ist es, die Medie Queries gebündet an das Ende der CSS-Datei zu setzen.

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

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: Wir können das Browserfenster beliebig aufziehen oder verkleinern.