Font-Size per Viewport

In einigen Projekten möchte ich, dass sich die Schriftgröße sowie die Schriftfarbe ab einem bestimmten Viewport ändert.

In folgendem Beispiel ist die Schriftfarbe bis 800px schwarz (#000000) und die Schriftgröße 16px, ab 800px soll die Schriftfarbe blau (#81CFE0) und die Schriftgröße von 16px beibehalten werden. Ab 1000px soll die Schriftfarbe zu orange (#F9690E) wechseln und die Schriftgröße 26px sein.

Hierfür nutze ich ein Mixin, welches in jeder Klasse eingesetzt werden kann und diesem die gewünschten Werte übergeben werden.

Folgendes Mixin benötigst Du dafür:

Der Aufruf erfolgt folgendermaßen:
Der erste Wert ist die Viewbreite, ab der die Änderung eintreten soll. Der zweite Wert ist die Schriftgröße und der dritte die Farbe.
Null bedeutet, kein Wert wird übergeben.

Der generierte CSS sieht wie folgt aus:

Ich freue mich auf Dein Feedback.