Fragen zur grid-Anwendung

[Rolf B]

Hallo Tommy,

da gibt es diverse Möglichkeiten. Man kann zum Beispiel die Schriftgröße abhängig von der Breite des Viewports oder des Elternelements setzen; man muss dann nur, wie Kalk erwähnte, die Größen limitieren oder es kann unleserlich werden.

Die Techniken sind nicht so kompliziert. Du musst die unterschiedlichen Arten lernen, wie man Größen ausdrückt. Dazu haben wir im Wiki einen Artikel über CSS Maße.

Zum Responsiv-sein gibt es zwei wichtige Themen:

1. Verwendung relativer Längenmaße, damit können Oberflächenelemente relativ zur Fenstergröße bzw. zum Elternelement skalieren
2. Verwendung von Media-Queries, damit kannst Du spezielle CSS Regeln schreiben, die dann aktiv werden, wenn das Ausgabemedium bestimmte Eigenschaften hat (z.B. min-width: 60em - sobald das Fenster breiter als 60em ist).

em ist eine ganz wichtige Einheit, sie basiert auf der Höhe eines Zeichens der an dieser Stelle gesetzten Schrift. Solange man nicht selbst etwas festlegt und der Browser auf einer Skalierung von 100% steht sind das sehr häufig 16px. Aber dafür gibt's keine Garantie, das darf man nicht gleichsetzen. Es gibt Leute, die setzen Media-Umschalter auf 37.5em oder 46.875em, weil sie vorher 500px oder 750px hatten und jetzt unbedingt responsiv sein wollen. Das ist Quatsch. So genau kommt es nicht drauf an, da hätten sie dann auch 38em und 47em nehmen können, oder gleich auf 40em und 50em runden.

Es ist deshalb ganz wichtig, auch ein bisschen zu experimentieren, welcher em Wert sinnvoll ist, um beispielsweise von einer Anordnung nebeneinander auf eine Anordnung untereinander umzuschalten. Einfach mal mit der Fenstergröße herumspielen, oder die Entwicklertools vom Browser öffnen (F12) und den Device-Simulator benutzen.

Media-Abfragen auf feste Pixelwerte (480px, 960px, etc) findet man zwar häufig in Beispielen, aber die sind nicht responsiv. Weil sie nicht auf die Zoomstufe im Browser reagieren.

Was man auch wissen muss: Ein CSS Pixel ist nicht unbedingt ein Gerätepixel. Ein iPhone hat mit seinem Retina-Display winzigkleine Pixel. Eine Webseite, die font-size:16px verlangt, würde ein Mikroskop benötigen. Weil es davon leider viel zu viele gibt, haben die Browser etwas eingeführt, was sie device-pixel-ratio nennen. In JavaScript ist das eine Eigenschaft des window-Objekts, im CSS war das mal ein Wert, den man in media-Queries verwenden konnte. Ein iPhone X hat eine device-pixel-ratio von 3 haben, dann ist 1 CSS Pixel = 3 Gerätepixel. Während das Gerät tatsächlich 1125×2436 Pixel hat, behauptet CSS, es habe 375×812. Wegen dieses Tricks musst Du Dich normalerweise nicht um die Pixeldichte des verwendeten Geräts kümmern. Aber wenn Du es willst, gibt es media-Queries auf resolution, womit Du die dpi (dots per inch) prüfen kannst.

Wenn Du die Schriftgröße abhängig von der Breite des Fensters haben willst: setze zum Beispiel font-size: 3vw. Das heißt: 3% der Fensterbreite. Wenn das Fenster 800px breit ist, wäre das eine Fontsize von 24px.

Damit die Schrift nicht zu klein wird, kann man die max-Funktion verwenden. Sie wählt den größeren der angegebenen Werte aus. font-size: max(3vw, 14px); bedeutet: Nimm 3vw wenn es mehr als 14px sind, sonst 14px.

Bei den Fahnen könntest Du so vorgehen, dass Du die Grid-Spalte, die die Fahnen enthält, nicht auf auto setzt, sondern auf 9vw. Oder so. Auch hier ist eine Untergrenze sinnvoll: max(9vw, 50px) zum Beispiel.

Ich habe mein Fiddle dafür mal neu aufgelegt: https://jsfiddle.net/Rolf_b/neog8ztx/

Da ich die Fahnen nicht als Bild einbinde, sondern per linear-gradient erzeuge, musste ich einen weiteren Trick anwenden, um die Höhe auf 2/3 der Breite zu setzen: padding-top und padding-bottom kann man in % angeben, aber das ist der prozentuale Anteil der Breite des Elements, nicht der Höhe. width:100%; padding-top:66%; sorgt bei einem ansonsten leeren div dafür, dass es so breit ist wie sein Container (was die grid-Spalte ist) und seine Höhe 2/3 dieser Breite beträgt. So, wie es die Trikolore sein soll.

D.h. man muss für ein responsives Layout diverse CSS Techniken kombinieren. Unser Wiki-Fleißkärtchensammler Matthias Scharwies hat dazu diese Artikelgruppe verfasst. Da steht eine Menge drin über relative Maße, Media-Queries und responsive Bilder.

Rolf