Get best of the week

Responsive Schriftart. Anpassen von Text zwischen Layout und Mindestwerten

Responsive oder Responsive Font ist der Traum eines jeden Webentwicklers. Ich überprüfte viele Optionen für die Implementierung, saß am Abend und fand eine zuverlässige Arbeitsoption. Ich möchte es mit Ihnen teilen. Bonus SCSS Mixin!


Also die Herausforderung. Geben Sie den Wert entsprechend dem Layout sowie den Mindestwert an, bei dem der Text oder Titel auf Mobilgeräten, z. B. iPhone 5 (320 Pixel), gut aussehen würde. In diesem Fall wird die Schriftart abhängig von der Bildschirmbreite angepasst, vergrößert oder verkleinert.

Wir nehmen die Anfangswerte aus dem Layout, zum Beispiel den H1-Header mit einer Größe von 40 Pixel. Wir benötigen auch die Breite des gesamten Canvas-Layouts, zum Beispiel 1280px.



Um den minimalen Schriftwert zu erhalten, erstellen wir die Kopfzeile entsprechend dem Layout und wählen mit den Chrome-Entwicklertools (F12) die gewünschte minimale Bildschirmgröße und die Schriftgröße aus. Ändern Sie den Wert, bis der Text angemessen aussieht. Danach habe ich 24px



in CSS anstelle der Schriftgröße: 40px; schreib das Folgende.

font-size: calc(24px + 16 * (100vw / 1280));

Wenn 24px unsere Mindestschrift ist, ist 16 der Unterschied zwischen der Schrift in Layout 40 und der Mindestschrift in 24 (40-24 = 16). 100vw ist die volle aktuelle Breite des Ansichtsfensters (Bildschirm), 1280 ist die Breite des Layouts.

Wir testen und erhalten eine reaktionsfähige Schriftart, die vollständig der Größe des Layouts entspricht.

Bei einer Größe von 320px sehen wir jedoch nicht das gewünschte Ergebnis, nämlich eine 24px-Schriftart. Dies liegt an der Tatsache, dass wir die minimale Bildschirmgröße nicht in genau 320px angegeben haben.



Um die Situation zu lösen, schreiben wir eine Medienanfrage für 767px und ändern darin die Formel:

@media (min-width: 767px){
 h1 {
  font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
 }
}

Hier subtrahieren wir 320px von der vollen Breite des Ansichtsfensters und fügen eine zusätzliche Zahl von 16 hinzu. Wir addieren 70% (16 + 16 * 0,7). Wir

überprüfen und sehen, ob die Aufgabe vollständig erfüllt ist! Gleichzeitig erfolgt der Übergang zum Haltepunkt nahtlos und nicht spürbar!

Natürlich können wir all dies im SCSS-Mixin schließen:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$addMobSize: $addSize + $addSize * 0.7;
	@media (max-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidth}));
	}
	@media (min-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
	}
}

Und verbinden Sie sich wie folgt:

h1{
 @include adaptiv-font(40, 24);
}


Sie können die Medienabfrage vollständig entfernen:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$maxWidth: $maxWidth - 320;
	font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}

Ich werde gerne in den Kommentaren lesen, wie diese Lösung sonst noch verbessert werden kann. Vielen Dank für Ihre Aufmerksamkeit!

Basierend auf Materialien aus dem Video " Adaptive Font. Ein Beispiel für die Implementierung einer responsiven (Gummi-) Schriftart auf CSS + SCSS-Mixin " Auf dem YouTube-Kanal " Freelancer for Life "

More articles:


All Articles