Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Responsive Webdesign: Schriftgröße an Viewport anpassen

Samstag, 4. April 2015

Nicht sehr bekannt ist die Möglichkeit, per CSS die Schriftgröße an den Viewport anzupassen. Die Einheit lautet einfach vw (viewport width). Im Rahmen von Responsive Web Design RWD kann das bei bedächtigem Einsatz schon mal Sinn machen.

Im folgenden Beispiel ist ein Absatz mit font-size: 4vw ausgezeichnet. In der Praxis wird man so etwas wohl hauptsächlich mit Überschriften machen wollen.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Um das Beispiel in Aktion zu sehen, einfach die Größe des Browserfensters verändern.
(Das Beispiel ist für die Ansicht auf Desktop-Monitoren konfiguriert. Auf dem Smartphone ist es wenig "beeindruckend"; Auch und vor allem, weil man die Größe des Browserfensters auf Smartphones nicht ohne weiteres ändern kann.)

Eine detaillierte Beschreibung findet sich bei treehouse.
Und weil der treehouse-Artikel schon etwas betagt ist, hier die Browserunterstützung.



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE