Dynamische Schriftgröße in Webflow: An die Abmessungen des Viewports anpassen

January 25, 2024

· 9 min

Entfessle das Potenzial dynamischer Textgrößen in Webflow! Sehen Sie sich unsere schrittweise Anleitung an, um eine Schriftgröße zu erstellen, die sich an Ihre Bildschirmbreite und -höhe anpasst.

Hallo Webflow-Enthusiasten! Heute beschäftigen wir uns mit einem Thema, das uns am Herzen liegt: dynamische Schriftgröße. Ja, du hast es richtig gehört, wir haben nur gelogen, wir mussten tatsächlich ein Problem für einen Kunden lösen, und wie die meisten Inhalte im How-to-Bereich unseres Blogs schreiben wir nur darüber, was wir tun mussten, um ein Problem zu lösen, das Webflow normalerweise nicht nativ löst. Als Webflow-Designer wollen wir die Dinge also immer so ohne Code wie möglich gestalten, aber manchmal muss man Low-Code verwenden.

Die Herausforderung

Lassen Sie uns die Bühne bereiten. Sie haben ein Webflow-Projekt. Sie haben ein Menü (muss kein Menü sein, könnte nur eine Überschrift sein usw.), in unserem Fall war es ein nettes Menü mit einer Liste von Regisseurnamen und einigen Hintergrundvideos, die abgespielt werden, wenn Sie mit der Maus darüber fahren, es gibt einen Haken. Der Kunde möchte, dass der Text im Menü so weit wie möglich die Seitenbreite ausfüllt, basierend auf dem längsten Menüpunkt. Und du kannst die Viewport-Breite nicht für die Schriftgröße verwenden, weil sie je nach Viewport-Breite oder Viewport-Höhe einen möglichst großen Teil des Platzes ausfüllen muss, oder du fängst an zu scrollen, wenn der Viewport überfüllt ist. Klingt nach einer Herausforderung, oder? Hier ist ein kurzer Blick auf das Menü, um Ihnen eine ungefähre Vorstellung davon zu geben, wie es angepasst werden soll, basierend auf der Anpassung der Höhe und Breite des Browserfensters.

Nun, meine Freunde, da beginnt unsere Reise.

Die Lösung

Geben Sie JavaScript ein, unseren treuen Kumpel. Mit einem Schuss JavaScript, einer Prise CSS und einer Menge Kreativität können wir eine Lösung finden, die unseren Menütext perfekt macht so breit wie möglich oder „hoch“, unabhängig von der Bildschirmgröße, Breite oder Höhe. Sie werden feststellen, dass unsere Version etwas komplizierter ist. Die Vor- und Nachnamen der Regisseure haben unterschiedliche Schriftarten und Schriftstärken, sodass sie nicht dieselbe Schriftgröße haben können, einer ist nur größer als der andere, aber wir fügen auch ein vereinfachtes Codepen-Beispiel hinzu, damit Sie herumspielen können, es ist nur eine Schriftart.

Das Navi

Wir haben unten zwei CodePens mit den Skripten eingebettet, die wir verwenden werden. Die erste ist eine vereinfachte Version, perfekt für diejenigen, die gerade erst anfangen oder eine einzige Schriftart anpassen müssen. Die zweite ist etwas fortgeschrittener, ein ideales Beispiel für diejenigen, die eine Herausforderung mögen oder mehrere Schriftarten zum Spielen haben oder für diejenigen, die einfach nur sehen möchten, wie Sie einige fortgeschrittenere Dinge tun können. Schauen Sie sich ruhig um, spielen Sie herum und sehen Sie, welche Magie wir erschaffen werden. Der Code im Stift sollte für Webflow-Experten, die sofort herumspielen möchten, editierbar sein.

Das einfache Beispiel

Fortgeschritteneres Beispiel für das, was wir getan haben

Dynamischer Text mit zwei Schriftarten

Der Zusammenbruch

Lassen Sie uns nun diese Drehbücher aufschlüsseln, als wären es heiße neue Tanzbewegungen.

Zuerst deklarieren wir eine Funktion namens adjustFontSize (). Dies ist das Herzstück unseres Betriebs, der Motor, der unser dynamisches Menü antreiben wird.

Funktion adjustFontSize () {
//...
}

In dieser Funktion greifen wir auf alle Elemente mit bestimmten Klassennamen zurück. Betrachte es als unsere Art zu sagen: „Hey, wir brauchen dich für eine Weile!“

var menuItems = document.querySelectorAll ('.menu_item');

Wir erhalten auch die Breite und Höhe des Viewports. Es ist, als würde man fragen: „Mit wie viel Platz müssen wir hier spielen?“

var ViewportWidth = math.max (document.documentElement.clientWidth || 0, window.innerWidth || 0);
var viewportHeight = math.max (document.documentElement.clientHeight || 0, window.innerHeight || 0) - 60;

Als Nächstes berechnen wir die Schriftgröße auf der Grundlage der Breite und Höhe des Viewports. Die Multiplikatoren hier sind quasi unsere geheimen Zutaten, um die richtige Schriftgröße zu finden. Wir nehmen die kleinere der beiden berechneten Schriftgrößen. Das ist unsere Art zu sagen: „Lass uns nicht zu verrückt mit der Schriftgröße werden, okay?“ Das ist der Punkt, an dem du mit beiden experimentieren musst, um es genau richtig zu machen, da es je nach Schrift und Länge des Textes variiert.

var fontSizeBasedOnWidth = ViewportWidth * 0,089;
var fontSizeBasedOnHeight = ViewportHeight * 0.19;
var fontSize = Math.min (Schriftgröße basiert auf Breite, Schriftgröße basiert auf Höhe);

Im fortgeschrittenen Skript machen wir auch den Nachnamen etwas größer als den Vornamen. Denn warum sollten Vornamen den ganzen Spaß machen, oder? Und wir berechnen hier den Buchstabenabstand.

var fontSizeLastName = Schriftgröße * 1,08;
var LetterSpace = Schriftgröße * -0,03;

Schließlich legen wir die Höhe jedes Linkblocks fest und wenden all diese Stile auf unsere Elemente an.

MenuItems.forEach (Funktion (Element) {
item.style.fontSize = Schriftgröße + 'px';
});

Und voila! Wir haben ein dynamisches Menü, das seine Schriftgröße an den längsten Menüpunkt und die Bildschirmgröße anpasst.

Die Zugabe

Aber wir hören hier nicht auf. Wir rufen unsere Funktion immer dann auf, wenn die Größe des Fensters geändert wird. Es ist, als würde man sagen: „Hey, wenn sich der Raum ändert, machen wir das alles noch einmal!“

window.onresize = FontSize anpassen;

Wir rufen unsere Funktion auch auf, wenn das Dokument fertig ist. Das ist unsere Art zu sagen: „Lasst uns diese Party beginnen!“

document.addEventListener ('domContentLoaded', justFontSize);

Einpacken

Da habt ihr es also, Leute. Eine schrittweise Anleitung, um Ihren Webflow-Text so dynamisch wie ein Cirque du Soleil-Akrobat zu gestalten. Es ist eine kleine Reise, aber am Ende des Tages haben wir ein Menü, das nicht nur gut aussieht, sondern sich auch an Ihre Inhalte und die Bildschirme Ihrer Nutzer anpasst.

Denken Sie daran, dass Anpassungsfähigkeit der Schlüssel zu einer großartigen Benutzererfahrung ist. Und mit diesem dynamischen Menü sind Sie auf dem besten Weg, eine Website zu erstellen, die so anpassungsfähig ist, wie es nur geht.

Bis zum nächsten Mal, erkunde weiter, experimentiere weiter und, was am wichtigsten ist, gestalte weiter. Die Welt von Webflow ist dein Spielplatz. Jetzt geh und mach etwas Tolles!

Wenn dir der Beitrag gefallen hat, geh Schauen Sie sich hier einige unserer anderen Anleitungen an.