Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Auf der Suche nach dem richtigen Breakpoint

Auf der Suche nach dem richtigen Breakpoint

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Auf der Suche nach dem richtigen Breakpoint

“

Die Abfrage der Mindest- und Höchstbreite des Viewports gehört wohl zu den am häufigsten eingesetzten Media Queries. Dabei muss man wie gesehen einen sog. Breakpoint definieren, an dem das Layout oder die Formatierung sich ändert. Dabei taucht automatisch die Frage auf, an welchen Stellen man diese Umbrüche benötigt. Diese Breakpoints sind meistens in Pixeln angegeben, können auch in em angegeben werden, aber es gibt zunächst einmal zur ersten Orientierung drei Geräteklassen: Mobile, gemeint sind damit Smartphones, Tablets, also iPads und andere Tablets, und Desktop, als Sammelbegriff für Laptops und Desktops, also Computer mit einer Tastatur, wenn man so will. In Pixelwerten ausgedrückt beginnen die Smartphones bei etwa 320 px. Viele sind 375 breit, manche irgendetwas mit 400. Eine Zahl, die man häufig sieht, ist 768 px. Und das hat sich nicht durch Würfeln ergeben, sondern das leitet sich vom Original-iPad ab, im Hochformat. Und ab 1024 px kommen dann Desktop und Laptops dabei und…

Inhalt