html/css text dynamisch anpassen?
hallo,
Weis jemand wie man Texte dynamisch der Bildschirmgröße anpassen kann? So wie bei div-containern oder Grafiken.
3 Antworten
Meiner Meinung nach sollte man Schriftgrößen nicht mithilfe von Media Queries oder Viewport-Units festlegen. Zum Einen berücksichtigt man damit die vom Nutzer im Browser eingestellte Schriftgröße nicht - dies verärgert gerade Nutzer, welche sich aufgrund einer Sehschwäche eine größere Schriftgröße eingestellt haben - und zum Anderen hat man bei Viewport-Units zur Zeit noch eine schlechte Kontrolle über das Verhalten. Beispiele:
- vmin: Halbiert man das Fenster vertikal, kann man kaum lesen: https://jsfiddle.net/a6co9v9v/
- vmax: Halbiert man das Fenster horizontal, kann man kaum lesen: https://jsfiddle.net/sL5a5qca/
- vh: Hier beobachtet man dasselbe wie bei vmin
- vw: Hier beobachtet man dasselbe wie bei vmax
- Mit jeglichen Mischungen komme ich ebenfalls auf keinen guten Wert.
Die bisherigen Antworten gehen nicht präzise genug auf deine Frage ein. Das Problem ist, dass sich diese Einheiten nicht auf die Bildschirmgröße, sondern auf den Viewport, d.h. die Größe des Bereiches des Fensters, die der Website zur Verfügung steht, beziehen (auch auf Smartphones gibt es Fenster oder halbierte Ansichten, also spielt dies dort ebenfalls eine Rolle!). Allerdings sollte sich die Schriftgröße nicht verändern, wenn man das Fenster verkleinert, denn dadurch, dass man das Fenster verkleinert, kann man doch nicht schlechter sehen und braucht eine andere Schriftgröße - das ist Schwachsinn! Aus diesem Grund sind Viewport-Units für Schriftgrößen ungeeignet - man sollte sie besser für andere Dinge gebrauchen, bei denen sie mehr Sinn machen. Wenn man der Idee folgen möchte, die Schriftgröße an die Bildschirmgröße anzupassen, so eignet sich dafür höchstens eine Lösung über JavaScript, von der ich jedoch abrate: https://jsfiddle.net/861psw4v/
AlternativenAbsolute Größen wie Pixel oder cm sind natürlich ebenfalls keine gute Idee, da sie all die Nachteile der anderen Lösungen sowie zusätzliche Probleme mit sich bringen. Deshalb rate ich dir dazu, für Schriftgrößen ausschließlich REM zu verwenden - übrigens wird dies auch hier auf gutefrage eingesetzt. REM setzt die Schriftgröße relativ zum Root-Element (HTML), welches wiederum relativ zur im Browser eingestellten Schriftgröße ist. Voreingestellte Schriftgrößen sind in der Regel bereits gut an die Größe des Bildschirms angepasst und somit z.B. auf Smartphones auf einen höheren Wert eingestellt. Außerdem kann man durch dieses Vorgehen auch auf die individuellen Vorlieben des Nutzers eingehen. Des Weiteren vergrößert sich die Schriftgröße beim Zoomen der Seite - dies ist bei Viewport-Units nicht der Fall!
Hier ein einfaches Beispiel: https://jsfiddle.net/attfoq27/
Nicht wundern, die 62.5% werden gerne verwendet, da viele Browser dieselben Standard-Schriftgrößen besitzen. Dadurch kann man mithilfe dieses Tricks für viele Desktop-Geräte die REM-Angaben in PX-Angaben umrechnen:
PX = REM * 10
Oftmals wird REM auch für Abstände, Breiten und Höhen verwendet, da man dadurch die Seitenelemente perfekt an den angrenzenden Text anpassen kann, sodass ein harmonischer Gesamteindruck entsteht.
FazitWarum sollte plötzlich die gesamte Seite anders aussehen, wenn man das Fenster halbiert? Die Schrift sollte unabhängig von der Fenstergröße sein und sich eher an Bildschirmgröße und Auflösung orientieren. Media Queries und Viewport-Units sind für diese Zwecke ungeeignet, da sie zu viele Seiteneffekte mit sich bringen. Absolute Größen verursachen noch mehr Probleme. Die beste Lösung ist somit in der heutigen Zeit die Nutzung von REM, weil hierdurch die beste Anpassung an die Bildschirmgröße sowie die Einhaltung von Nutzervorlieben gewährleistet werden kann. Es gibt auch Webentwickler, die eine Kombination von REM mit Viewport-Units in Betracht ziehen. Es lässt sich jedoch darüber streiten, inwieweit dies sinnvoll sein kann.
Meinst du konkret die Schriftgröße? Verwende in diesem Fall die Einheiten vh, vw, vmin oder vmax (siehe dazu hier).
Für Wortumbrüche solltest du dir die CSS-Properties word-wrap und word-break anschauen. Des Weiteren gibt es noch das Property hyphens, doch dieses ist leider noch in der Experimentierphase.
Der Unterschied zwischen word-wrap und word-break wird hier deutlich. Das Property word-break (mit dem Wert break-all) bricht Wörter ungeachtet ihrer Länge ab, selbst wenn es mitten im Wort stattfindet. Das Property word-wrap (mit dem Wert break-word) hingegen setzt zu lange Wörter in die nächste Zeile und bricht erst dann, wenn notwendig. In einer neueren W3C-Spezifikation wurde dieses Property übrigens zu overflow-wrap umbenannt, dennoch wird von Browsern auch noch der alte Name unterstützt.
Zu vh, vw, vmin und vmax: Eigentlich wird dies in der Dokumentation recht einfach und deutlich definiert. vh orientiert sich an der initialen Höhe des Containers, in dem sich die Schrift befindet, vw an der initialen Breite. Je nachdem wird ein Prozent dieser Höhe/Breite berechnet und als Schriftgröße verwendet.
Bei vmin und vmax wird entweder der kleinste oder der größte Wert verwendet, der Ergebnis bei vh oder vw wäre. Wenn also der Container, in dem sich die Schrift befindet, initial breiter als hoch ist, nutzt vmin das Ergebnis von vh.
p {
font-size: 4vmin;
height: 200px;
width: 400px;
}
Hier wäre das Ergebnis 8px.
Berechnung:
vh = (4 * 200px) / 100 = 8px
vw = (4 * 400px) / 100 = 16px
vmin = vh, da vh < vw
Einen konkreten Use Case kannst du hier nachlesen.
und finden sie es gut diese als anpassung für smartphones zu benutzen oder gibt es da bessere lösungen ?
Es ist a good practice. Als Alternative zu den Viewport Units könntest du noch mit Media Queries stufenweise die Schriftgröße setzen, das wäre ebenso in Ordnung.
Ein Beispiel:
/* device view < landscape */
@media only screen and (min-width : 321px) {
font-size: 12px;
}
/* device view > portrait */
@media only screen and (max-width : 320px) {
font-size: 13px;
}
Weis jemand wie man Texte dynamisch der Bildschirmgröße anpassen kann?
Funktioniert recht einfach mit Hilfe von Media Queries und/oder Viewport-Units. Ich habe dir mal zwei Artikel verlinkt, in denen es ausführlich beschrieben wird.
- https://www.mediaevent.de/css/font-size.html#main
- https://www.smashingmagazine.com/2016/05/fluid-typography/
LG medmonk
Vielen Dank!
Hat mir alles geholfen. Jeden verstehe ich nicht den unterschied zwichen word-wrap und word-break und auch bei vw, vh usw. Könntest du mir das erklären vielleicht ?