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.

Solution: Responsive Schriftgröße per Media Query

Solution: Responsive Schriftgröße per Media Query

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

Gratismonat starten Für Ihr Team erwerben

Solution: Responsive Schriftgröße per Media Query

“

(Upbeat-Musik) Willkommen zur Lösung der Challenge mit der responsiven Schriftgröße. Sie sehen hier die Grundgestaltung body, "font size: 1rem;" wird explizit hingeschrieben, das ist genau genommen nicht nötig, aber gut zur Erinnerung. Da hier keine Media Query definiert ist, gilt das eigentlich für alle Viewport-Breiten. Also, geht los bei 320 Pixel auf ganz schmalen Smartphones. Die erste Media Query, "@media screen and (min-width: 768px)" zieht also für Tablets. 768 Pixel ist eine typische Breite für den Viewport eines Tablets im Hochformat. Und wenn das gilt, dann wird die Schriftgröße für das Stammelement html auf 1.125rem hochgesetzt. Für noch breitere Viewports gilt dann die nächste Media Query. "min-width: 1280px", 1.25rem. Für alle Werte hier gilt, also sowohl für die Breakpoints als auch für die Schriftgröße, dass sie nicht in Stein gemeißelt sind. Das ist abhängig vom Layout und das ist zum Teil schlicht und einfach ein bisschen Geschmackssache. Ich wechsle mal in den…

Inhalt