Die @media Regel kann genutzt werden um verschiedene Styles für unterschiedliche Medien-Typen bzw. Ausgabegeräte zu nutzen. So lassen sich z.B. in Hinblick auf unterschiedliche Bildschirmgrößen, Schriftgrößen oder komplette charts/tables größer/kleiner darstellen.

Die Syntax sieht folgendermaßen aus:

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

/* Beispiel: */
@media screen and (min-width: 480px) {
	.categoryLabels {
		font-size: larger !important;
	}
}

In diesem Beispiel wird die Schriftgröße der Category Labels erhöht, sobald es sich beim Ausgabegerät um einen Screen mit mindestens 480px Breite handelt.

Weiterführende Informationen

Artikel über @media bei MDN

Browser not supported