Browserweichen

Um für bestimmte Browsergrößen oder mobile Geräte andere Styles zu verwenden, kann man mit sog. Browserweichen arbeiten.

In den CSS-Code wird eine Zeile mit geschweiften Klammern hinzugefügt:

@media not|only mediatype and (media feature  and|or|not mediafeature) {
  CSS-Code;
}

Aktuell gelten folgende Einstellungen für div. Bildschirmgrößen:

Viewports mit 768px Breite hochkant
@media only screen and (device-width:768px) and (orientation:portrait) {}
Große Bildschirme mit mehr als 1080 Pixel breite
@media only screen and (min-width: 1080px) {}

Mit dem folgenden Code kann man auch bestimmen, ob Elemente beim Drucken anders aussehen sollen:

@media print

CSS-Medientypen

TypAusgabemedium
allalle Geräte
auralSprachbrowser, die den Inhalt der Webseite vorlesen
brailleGeräte mit Braillezeile. Der Text der Webseite wird in die veränderte Oberflächenstruktur der Braillezeile umgewandelt.
embossedBrailledrucker. Den gestanzten Text der Website können blinde Menschen ertasten.
handheldHandcomputer wie Palms oder Mobiltelefone, meist mit monochromen Bildschirmen und geringer Bandbreite
printDrucker
projectionProjektoren und ähnliche Geräte
screenBildschirm (Computermonitor)
ttyfür die Ausgabe auf nichtgrafischen Ausgabemedien mit Festbreitenschrift, wie Terminals oder Textbrowser
tvFernseher oder ähnliche Geräte