Fluid responsive

Füge allen Client-First-Projekten Fluid responsive (flüssige Responsivität bzw. Skalierung) mit einem visuellen Konfigurator hinzu. Keine Berechnungen, kein eigenes CSS, kein Javascript.

Translator

Sebastian Zimmer

Translator

Christian Schmitt

Werkzeuge

Es gibt zwei Optionen, um das Client-First Webflow Projekt auf allen Geräten optimal anzeigen zu lassen, sprich Fluid responsive zu machen.

Der visuelle CSS-Snippet-Konfigurator auf dieser Seite
Der gleiche visuelle Konfigurator in der Finsweet Extension

Was ist "Fluid responsive"?

Wenn sich die Größe des Browserfensters ändert, skaliert das Design mit bzw. das Design passt sich jedem Bildschirm an.

Vergleich zwischen Client-First Fluid responsive und vw- und vh-Skalierung

Wenn sich die Größe des Browserfensters ändert, skaliert das Design mit.

Die Verwendung von vw- oder vh ist eine Möglichkeit, unsere Inhalte bei der Skalierung flüssig zu halten. Die Probleme bei dieser Methode sind:

Wir müssen für jedes Element, das flüssig sein soll, Einheitsgrößen für vw oder vh festlegen.
Durch die lineare Skalierung können Elemente schnell zu klein oder zu groß werden. vw und vh skalieren linear.
Die Barrierefreiheit leidet, weil das Zoomen im Browser sich nicht auf vw und vh auswirkt.
Es kann eine Herausforderung sein, unser Webflow-Projekt in vw und vh zu verwalten und zu pflegen, besonders für andere Entwickler und Kunden.

Client-First verwendet stattdessen die "root-font scaling".

Root-font scaling

Das Client-First-System verwendet rem für alle Größen. Die Einheit rem basiert auf einer Sache – der HTML root font size (HTML-Schriftgröße).

Alles in unserem Projekt ist relativ zur HTML-Schriftgröße. Dadurch haben wir eine globale Steuerung über alle Größen in unserem Projekt.

Indem wir diese Größe ändern, machen wir unsere rem visuell "größer" oder "kleiner". Unser visueller Konfigurator basiert auf einer Reihe von Berechnungen, die HTML-Schriftgröße nach unseren Wünschen verändern.

Durch Hinzufügen des generierten CSS-Codes folgt unser Webflow-Projekt benutzerdefinierten Skalierungsregeln. Indem wir die HTML-Schriftgröße über Breakpoints hinweg ändern, können wir die flüssige, responsive Skalierung optimal anpassen.

Vorteile:

Verwende Client-First, wie du es normalerweise tust. Es gibt keine besonderen Unterschiede im Arbeitsablauf für Webseiten mit oder ohne _{Fluid responsive}.
_{Fluid responsive}ist ein optionales Add-on. Du kannst sie zu jedem Projekt hinzufügen oder auch nicht.
_{Fluid Responsive} kann am Ende des Projekts hinzugefügt werden, nachdem alles entwickelt wurde.
Browser können normal zoomen.
Browser-Schriftgrößeneinstellungen, die von den Endnutzern geändert werden, werden beachtet.
Die Pflege eines Webflow-Projekts in rem ist einfacher als die eines Projekts, das auf vw oder vh basiert.