Einführung
Breakpoints sind grundlegende Daten, wo sich das Layout ändert, um sich optimal an eine Geräteklasse (Monitor) anzupassen. Sie können durch Media Queries bestimmt werden. Hier ein Teil des Beispiels in der Darstellung im Browser.
Wohin sollte man am besten Breakpoints setzen? Der aktuelle Blick sollte hier auf den mobilen Geräten, wie Tablets und Handys liegen. Es ist mit Sicherheit nicht nötig für jede einzelne Geräteklasse einen Breakpoint zu setzen. Warum nicht? Je mehr Breakpoints um so größer wird der benötigte Code. Folglich steigert es auch nicht die Übersichtlichkeit.
Umsetzung
Sinnvoll ist es die Gerätevielfalt in Klassen einzuteilen. Meist reicht es aus auf drei Gerätegruppen sich zu konzentrieren, klein, mittel und groß. Meiner Meinung nach sind Werte von kleiner als 5-600px, größer als 1200px recht gut geeignet. Als weiters bieten sich Anpassungen für die Gerätegruppe dazwischen an. Wer mag kann gern mehr verwenden. In dem vorliegenden Beispiel habe ich den Hintergrund darauf bezogen anpassen lassen. Hier ein Beispiel mit fünf Breakpoints.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<style>
.beispiel {
padding: 20px;
color: white;
line-height: 1.5em;
}
/* Sehr kleine Geräte (Handys, 600px und darunter) */
@media only screen and (max-width: 600px) {
.beispiel {background: red; font-size: 18px}
}
/* Kleine Geräte (Tablets und große Handys, 600px und mehr) */
@media only screen and (min-width: 600px) {
.beispiel {background: green; font-size: 20px}
}
/* Zwischengrößen (Tablets, 768px und mehr) */
@media only screen and (min-width: 768px) {
.beispiel {background: blue; font-size: 24px}
}
/* Große Breite (Laptops/Desktops, 992px und mehr) */
@media only screen and (min-width: 992px) {
.beispiel {background: orange; font-size: 28px}
}
/* Sehr große Breite (Große Laptops und Desktops, 1200px und mehr) */
@media only screen and (min-width: 1200px) {
.beispiel {background: pink; font-size: 32px}
}
</style>
</head>
<body>
<h2>Typische Breakpoints</h2>
<p class="beispiel">Passe die Breite des Browserfensters an, um zu sehen wie sich die Eingenschaften (Hintergrundfarbe, Schriftgröße) verändern.</p>
</body>
</html>