Breakpoints

A O R S T U W

sind im CSS per Media Queries definierte Punkte mithilfe derer sich Darstellung und Verhalten der Elemente einer Webseite beeinflussen lässt. Insbesondere bei der Anpassung einer Webseite an verschiedene Displaygrößen wird diese Technik eingesetzt.

Möchte man z.B. erreichen, das bei einer Displaygröße ab 900 und bis 1024 Pixel, alle H1 Überschriften rot dargestellt werden, genügt es diesen (break)Punkt im Stylesheet mit einer @Media Anweisung zu definieren.

@media only screen and (min-device-width : 900px) and (max-device-width : 1024px) {
h1 {color:red;}
}
Diese Anweisung würde nur auf Displaygrößen von 900 Pixel und bis 1024 Pixel angewendet werden. Andere Größen würden die H1 Überschrift so anzeigen, wie im Stylesheet angegeben.