renvert.com Logo Druckversion


Mit Breakpoints zum Erfolg.

Weblayouts mit Media Queries steuern

[zum Inhalt]
Hintergrundbild

Volle Layout-Kontrolle

Breakpoints dienen der reibungslosen Darstellung auf allen Bildschirmen und Geräten. Mit ihnen kann das Layout einer Website sehr genau gesteuert und verändert werden.

Was genau ist ein Breakpoint?

Das Thema hat rein gar nichts mit Tennis zu tun – auch wenn das Titelbild es vermuten lässt. Ein sog. "Breakpoint" ist eine CSS-Deklaration, die nur ab bzw. bis einer festgelegten Geräteeigenschaft Gültigkeit hat. Dies kann z. B. die Bildschirmbreite, die Bildschirmhöhe, die Auflösung des Geräts oder der Mediatyp (screen, print, handheld, ...) sein. Breakpoints werden mit Hilfe von Media Queries im CSS definiert. Hierbei ist es egal, ob diese im Headerbereich der HTML-Seite oder in einem verlinkten Stylesheet stehen.

Ein einfaches Beispiel mit Media Queries

Angenommen, wir möchten für mobile Endgeräte gewisse Elemente ausblenden, die ab einer Bildschirmbreite von 800 Pixeln dann wieder erscheinen sollen. Nach dem Mobile First Prinzip definieren wir die mobilen Styles ohne Media Query als Standard; dadrunter dann den Query für eine Breite ab 800 px:

/*
 Mobile First –
 Bei einer Bildschirmbreite unter 800 Pixeln
 blenden wir überflüssige Elemente aus:
*/

.desktop_only {
 display: none;
}

/* Media Query für die Darstellung ab 800 px */

@media only screen and (min-width: 800px) {
 .desktop_only {
   display: block;
   /* weitere CSS-Anweisungen */
 }
}

Innerhalb des Queries kann auch ein komplett neues Layout definiert werden – sofern das Sinn macht.

Wie das Ganze in der Praxis ausschaut, kannst Du sehen, wenn Du Dein aktuelles Browserfenster kleiner ziehst. Du wirst feststellen, dass sich das Layout stets sauber an die Fensterbreite anpasst; ab einer gewissen Breite wechselt die linke Toolbar in eine reduzierte Leiste am oberen Fensterrand und ab unter 850 Pixeln erscheint anstelle des Hauptmenüs ein Button zum Ein- und Ausblenden der Navigation.

Für diesen Effekt habe ich insgesamt ganze sieben Breakpoints definiert; manche nur für Änderungen von Kleinigkeiten. Zur besseren Übersicht sollte man die verschiedenen Media Queries in einzelne Stylesheets legen und per @import Anweisung laden.
Bei mir schaut das dann wie folgt aus:

@import 'default.css'; /* Default Layout (= mobile) */
@import 'bp480.css'; /* ab einer Breite von 480 px */
@import 'bp600.css'; /* ab einer Breite von 600 px */
@import 'bp800.css'; /* usw. ... */
@import 'bp900.css';
@import 'bp1280.css';
@import 'bp1400.css';
@import 'bp1600.css';
@import 'print.css'; /* und noch das Print-Stylesheet */

Damit das auch wirklich wie gewünscht funktioniert, muss der Viewport der Seite entsprechend flexibel gesetzt werden. Wie das geht, erkläre ich in diesem Artikel.

Willkommen in der Welt des responsiven Webdesigns.

Eingangs hatte ich erwähnt, dass mit Media Queries noch viel mehr abgefragt werden kann, um das Layout an die unterschiedlichsten technischen Gegebenheiten anzupassen.
Hier eine Übersicht aller Medieneigenschaften:

Die Medieneigenschaften im Überblick

Eigenschaft Beschreibung Einheiten
width
(min-/max-)
Breite der sichtbaren Ausgabe (Viewport) px, %, em
height
(min-/max-)
Höhe der sichtbaren Ausgabe px, %, em
device-width
(min-/max-)
Breite des Displays des Ausgabegerätes
(oder der Breite einer gedruckten Seite)
px, %, em
device-height
(min-/max-)
Höhe des Displays des Ausgabegerätes
(oder der Breite einer gedruckten Seite)
 px, %, em
orientation Prüft die Ausrichtung eines Eingabegerätes. orientation: portrait erfasst die Ausrichtung, bei der die Höhe größer als die Breite eines Gerätes ist. Gegenteil: orientation: landscape portrait,
ladscape
aspect-ratio
(min-/max-)
Prüft das Seitenverhältnis der sichtbaren Ausgabe Breite/Höhe,
z.B. 16/9,
1280/720
device-aspect-ratio
(min-/max-)
Prüft das Seitenverhältnis des Ausgabegerätes Breite/Höhe,
z.B. 16/9,
1280/720
color-index
(min-/max-)
Prüft das Ausgabegerät auf die Verwendung von indizierten Farben. Integer
monochrome
(min-/max-)
Prüft die Farbtiefe (Bits per Pixel) auf monochromen Ausgabegeräten. monochrome: 0 wäre der Wert für nicht-monochrome Geräte Integer
resolution
(min-/max-)
Prüft die Pixeldichte in dpi (dots per inch) oder dpcm (dots per centimeter) dpi, dpcm
scan  Testet TV Geräte auf die Bilddarstellungsarten Vollbild (progressiv) und Halbbild (interlace) progressive,
interlace
grid  Prüft die Rastereigenschaft. Bei Ausgabemedien, die Inhalte in einem Raster darstellen, ist der Wert 1, bei einer Bitmap-Darstellung ist der Wert 0.  0,1

Tabelle – Alle Medieneigenschaften im Überblick. Quelle: Ertel, Laborenz "Responsive Webdesign"

Folge mir auf twitter

Hinweis: Momentan ist die Geschwindigkeit meiner Website aufgrund eines Serverproblems bei meinem Hosting-Anbieter stark beeinträchtigt.
Ich bitte, diese Unannehmlichkeit zu entschuldigen.


Fenster schließen

Danke fürs Teilen.

Fenster schließen