Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 11.08.2020, 18:04
hatschiii hatschiii ist offline
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 45
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

Also... ich habe es selbst gelöst

Die kleinste Schriftgröße ist 24px, die größte 36px
Ich habe nun für 13 verschiedene @media min-with die px größe der Schriftgröße definiert.

Das klingt jetzt kompliziert. In den Browser Deloper Tools kann man die Festerbreite Pixel für Pixel ändern und glechzeitig die Schriftgröße ändern... so bekommt man innerhalb von ein paar Minuten die nötigen min-with Breiten raus.

Nun habe ich am Mobile statt 4 Zeilen überschrift eine etwas kleinere Schrift udn nur 2 Zeilen... und bis zur Desktop Breite wird die Schrift in 1px Schritten größer... immer zum richtigen Zeitpunkt.

Mit Calc oder irgendwas anderem hätte ich das nie so genau hin bekommen. So kann ich Pixel genau auf die Breite eingehen und Pixel genau die Schriftgröße anpassen.

Mit 13 Schritten ist die @media Lösung machbar. Währen es deutlich mehr gewesen wäre der Aufwand udn der zusätzliche Code zu groß gewesen.

Hier im Video sieht man den Umbruch schön. Es geht nur um die Überschrift "Customer Experience & Digital Transformation"

https://dlgo.de/header.mp4

----------------------

Geändert von hatschiii (11.08.2020 um 18:14 Uhr)
Mit Zitat antworten