Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren

[Gunnar Bittersmann]

@@einsiedler

Sprich, ich habe folgende Werte gefunden:

600 px small tablet portrait -- 768 px large tablet portrait – 800 px phone small tablet landscape -- 1024 px large tablet landscape --

und ich fand noch einige werte wie 600px, 980px, 1260px... u.s.w.

Da hast du an der falschen Stelle gesucht. Responsive design heißt nicht, Breakpoints an Stellen zu setzen, die sich an irgendwelchen gegenwärtig(!) handelsüblichen Geräten orientieren.

Setze Breakpoints dort, wo es der Seiteninhalt erfordert. Das heißt bspw., von ein- auf zweispaltig dort umzuschalten, wo die Breite für die jeweiligen Spalteninhalte nebeneinander ausreicht. Wo das ist, kann also von Seite zu Seite verschieden sein. Du siehst, dass der Breakpoint vom Inhalt abhängt, nicht von 600, 768 oder sonstwelchen aus der Luft gegriffenen Zahlen.

Wenn überhaupt. CSS Grid (und auch Flexbox) lassen sich ggfs. so einsetzen, dass man bspw. für ein-/zweispaltig gar keine Breakpoints braucht.

Kwakoni Yiquan