Text responsiv darstellen - Scripte, Animationen, Templates und Tipps für WebsiteX5 -

  Tag 280
06.10.2024
C
Summe aller Downloads seit Januar 2020: 108714 [Stand: 07.10.2024 - 07:00 h]
 • Tag 280
Direkt zum Seiteninhalt

Text responsiv darstellen

Themenseiten
Quelle: Lizenziertes Premium-Bild <draft-77620075.jpg> https://depositphotos.com
Texte in Ihrem Script responsiv darstellen
Wenn Sie Scripte erstellen, die z.B. Texte ausgeben, kann es hilfreich sein, diese Texte, je nach Endgerät, responsiv darzustellen. Das kann man einfach mit CSS erledigen. Der CSS-Code für Font-Größe ist da die einfachste Möglichkeit mit einer Formel den Wert font-size: zu erweitern. Wollen Sie also auf dem PC die Größe mit 28px anzeigen, würde der Code font-size: 28px; auf einem kleineren Endgerät zu groß angezeigt. Hier hilft die Formel:

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
Also kann der Code so aussehen:

.ihre_klasse {
font-size: calc(16px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
}

und hier können Sie sich eine Erläuterung mit Code-Beispiel herunterladen


responsiver text
Erstelldatum 21.09.2024
Revision 00 vom 21.09.2024 - Script- und Seitenerstellung.
website security
Letzte Aktualisierung: 06.10.2024
internet-abc.de   /
für Kinder, Lehrkräfte und Eltern
Zurück zum Seiteninhalt