Die CSS3 Media Queries unterstützen das Responsive Webdesign, wo das flexible Grid an die Grenzen stößt. Bei den vielen unterschiedlichen Displaygrößen von PCs, Tablets und Smartphones ist es notwendig für die verschiedenen Formate auch eigene CSS-Styles zu definieren.

 

Einführung von Media Typen in CSS2

Mit CSS2 wurden schon die Media Typen eingeführt, die es ermöglichen, unterschiedliche CSS Stile an verschiedene Geräte zu übermitteln. Mithilfe des media-Attributs können Stylesheet gezielt für den Bildschirm oder für den Drucker ausgeliefert werden.

Die Einbindung mit den Media Types sieht wie folgt aus:

<!-- Stylesheet für den Bildschirm -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<!-- Stylesheet für den Drucker -->
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>

oder alternativ:

@media screen {
/* CSS für Bildschirm */
}

@media print {
/* CSS für Drucker */
}

 

Von CSS2 Media Typen zu CSS3 Media Queries

Die CSS3 Media Queries erweitern an dieser Stelle die CSS2 Media Typen, und bieten die Möglichkeit, einzelne Media Typen stärker einzugrenzen, indem man die Auflösung, Bildschirmgröße oder Farben für die unterschiedlichen Endgeräte festlegen kann. So kann man z. B. ganz gezielt die Darstellung einer Website für ein Tablet oder Smartphone mit CSS bestimmen.

Responsive Webdesign mit CSS3 Media Queries

Wenn Sie z. B. ein Stylesheet mit Mindestfensterbreite von 800px festlegen möchten, würde es wie folgt aussehen:

@media screen and (min-width: 800px){…}

Ältere Browser erkennen leider die CSS3 Media Queris nicht oder interpretieren die Anweisung falsch. Damit es zu keinen bösen Überraschungen kommt, wird dem Media-Typ screen ein only vorangestellt:

@media only screen and (min-width: 800px){…}

 

Verwendung der CSS3 Media Queries

Um die richtige Breite für die Umbruchstellen Ihrer Website zu finden, können Sie die Website respnosivepx.com benutzen.  Nehmen wir z. B. an, dass die Umbruchstellen an den Positionen 1080px, 960px, 768px, 480px und 320px sind, dann würde es folgendermaßen aussehen:

@media only screen and ( max-width: 1080px ) {…}
@media only screen and ( max-width: 960px ) {…}
@media only screen and ( max-width: 768px ) {…}
@media only screen and ( max-width: 480px ) {…}
@media only screen and ( max-width: 320px ) {…}

 

Der Viewport Meta-Tag

Mit den CSS3 Media Queries können wir jetzt das Webdesign auf die verschiedenen Display-Größen anpassen. Neben der Verwendung von den CSS3 Media Queries ist es allerdings noch wichtig das Meta-Tag viewport zu verwenden, da die CSS3 Media Queries von Tablets und Smartphones nicht korrekt interpretiert und angezeigt werden.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>

Mit dieser Anweisung werden die imaginären Breiten von den Media Queries übernommen und gerendert.

Detaillierte Informationen über den Viewport Meta-Tag erhalten Sie im Artikel Responsive Webdesign für mobile Geräte.

 

Haben Sie Fragen oder Probleme bei den CSS3 Media Queries für Responsive Webdesign? Gerne helfen wir Ihnen weiter. Kontaktieren Sie uns einfach.