Text responsiv darstellen
Themenseiten
Quelle: Lizenziertes Premium-Bild <standard_m-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.