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
| Typ | Ausgabemedium |
| all | alle Geräte |
| aural | Sprachbrowser, die den Inhalt der Webseite vorlesen |
| braille | Geräte mit Braillezeile. Der Text der Webseite wird in die veränderte Oberflächenstruktur der Braillezeile umgewandelt. |
| embossed | Brailledrucker. Den gestanzten Text der Website können blinde Menschen ertasten. |
| handheld | Handcomputer wie Palms oder Mobiltelefone, meist mit monochromen Bildschirmen und geringer Bandbreite |
| Drucker | |
| projection | Projektoren und ähnliche Geräte |
| screen | Bildschirm (Computermonitor) |
| tty | für die Ausgabe auf nichtgrafischen Ausgabemedien mit Festbreitenschrift, wie Terminals oder Textbrowser |
| tv | Fernseher oder ähnliche Geräte |