|
|||
Schriftgrößen "liquid" an die Fensterbreite anpassen?
Hi Forum,
Trifft es zu, dass man Schriftgrößen (auch für Content-Fließtext) mittels CSS flüssig an die Breite des Viewport anpassen kann? Falls ja: kann man dabei auch minimale und maximale Schriftgrößen definieren? Dankbar wäre ich für einen Link auf eine Beispielseite -- oder auf eine Seite, wo erklärt wird, wie man eine solche flüssige (also nicht adaptiv stufenweise) Schriftgrößenanpassung programmiert. Grüße Silber |
Sponsored Links |
|
|||
Hallo!
Schau mal hier: CSS3: Viewport Units - Neue Einheiten für responsive Designs - Dr. Web Ob du damit allerdings (gerade bei Schriften) wirklich glücklich wirst, musst du selber wissen. Klitzekleine Schrift bei klitzekleinem Viewport kann ja schließlich auch nicht die Lösung sein.
__________________
Gruß schatzi |
Sponsored Links |
|
|||
OK danke für den Link.
Zitat:
Werden die Viewport Units von den Browsern auch schon verbreitet unterstützt? Bei diesem Beispiel aus dem Link zu drweb: HTML-Code:
h1 { font-size: 10vw; } Kann ich für die Schriftgröße auch eine Formel angeben wie z.B. folgende HTML-Code:
h1 { font-size: [8px + 0.2vw]; } Geändert von Silber (27.04.2015 um 15:54 Uhr) Grund: Formel verbessert |
|
|||
Hallo!
Zitat:
Du kannst es mal mit "calc" versuchen, aber das habe ich jetzt nicht getestet. Ich persönlich halte es nach wie vor für schlauer, bei Schriftgrößen den adaptiven Weg über MediaQueries zu gehen.
__________________
Gruß schatzi |
|
|||
Zitat:
Zitat:
Habe die Viewport Units gerade mal schnell auf einer Seite ausprobiert, sowohl im Fließtext als auch beispielsweise bei textbasierten Menüs, funktioniert super und praktisch stufenlos. Nur schade, dass man die Textgröße nicht auch basierend beispielsweise auf der Breite des Parent Div angeben kann, sondern auf die Breitenrelation des Viewport beschränkt ist (außer man verwendet SVG, wie in dieser Diskussion angesprochen). Hier mal ein JSFiddle gebaut. Geändert von Silber (27.04.2015 um 15:51 Uhr) |
|
|||
Zitat:
HTML-Code:
font-size: calc(8px + 0.5vw) |
|
|||
Geändert von Silber (05.06.2017 um 19:27 Uhr) |
|
|||
Hallo
Das Beispiel zeigt auch gleich die Nachteile des Vorgehens. Nicht jeder hat solche Adleraugen wie du. Einer der größten Kritikpunkte von Webseiten sind zu kleine Schriften, die dann von vielen Usern kaum noch gelesen werden können. Häufig wird bereits die Standardschrift der Browser als zu klein empfunden. Bei kleinen Viewports sollte die Schrift eher noch vergrößert werden, da diese häufig auf Smartphones / Tabletes zum Tragen kommt, die mobil genutzt werden. Heißt: Das Gerät hat keinen gleichmäßigen Abstand zu den Augen und zittert auch noch, zum Beispiel bei Bahnfahrten, Busfahrten und ähnlichem. Grade mit aktuellem, responsive, Design ist das heutzutage problemlos möglich. Deinen Besuchern tust du mit deinem Vorgehen jedenfalls keinen Gefallen. Gruss MrMurphy |
Sponsored Links |
|
|||
Das stimmt natürlich. Es geht hier aber auch nicht um den Fließtext, sondern um ein Hauptmenu, welches im Header oben quer verläuft. Dieses macht Schwierigkeiten, da es je nach Browserbreite teilweise nicht mehr passt und dann unerwünscht zweizeilig wird, was wiederum die Navigation im Content-Bereich verhaut.
Die unterschiedlichen Endgeräte werden sowieso mit gänzlich verschiedenen Layouts responsiv versorgt. Edit: Haha, oder man nimmt einfach so was wie Code:
font-size: calc(28px - 2vw); Geändert von Silber (05.06.2017 um 19:24 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Grafik an Elementhöhe anpassen / Element an Seitenhöhe anpassen | DasGrussel | Site- und Layoutcheck | 6 | 19.01.2012 09:43 |
verschachteltes div an Fensterbreite anpassen | madmax | CSS | 16 | 21.02.2010 18:35 |
CSS-Layout der Browsergröße anpassen | Jen | CSS | 3 | 14.11.2008 09:39 |