Responsive Fluide

Ajoutez du responsive fluide (fluid responsive) à tous les projets Client-First à l'aide d'un outil visuel de calibrage. Pas de calculs, pas de code CSS personnalisé, pas de javascript.

Les outils

Deux solutions existent pour que notre site Webflow "Client-First" ait un responsive fluide

  1. Le configurateur de code CSS visuel sur cette page
  2. Le même configurateur visuel dans l'extension Finsweet

Qu'est-ce que le responsive fluide (Fluid Responsive) ?

Lorsque la taille de la fenêtre du navigateur change, la design s'adapte

Le responsive fluide de Client-First fluid comparativement aux échelles vw et vh

Lorsque la fenêtre du navigateur change de taille, le design évolue avec elle.

L'utilisation d'unités vw ou vh est un moyen de rendre notre contenu responsive fluide lors du changement de la taille de la fenêtre du navigateur. Les problèmes que pose cette méthode sont les suivants :

  • Nous devons définir pour chaque élément des tailles d'unités vw ou vh pour qu'il soit responsive
  • Les éléments peuvent rapidement devenir trop petits ou trop grands en raison d'une mise à l'échelle linéaire. Les unités vw et vh suivent une évolution linéaire.
  • Il y a un problème d’accessibilité car les unités vw et vh ne prennent pas en considération les paramètres de grossissement du navigateur.
  • Il peut être délicat de gérer et de faire la maintenance de notre projet Webflow en vw et vh (surtout pour les clients et/ou les autres développeurs)

Client-First utilise "root-font scaling" (Mise à l’échelle de la police racine) à la place.

Root-font scaling (Mise à l’échelle de la police racine)

Le système "Client-First" utilise les unités rem pour toutes les tailles. L'unité rem est basée sur une seule chose : la taille de la police racine HTML (HTML root font size).
Utilisation des REM dans Webflow

Tous les éléments de notre projet sont relatifs à la taille de la police HTML. De ce fait, nous avons un contrôle global sur toutes les tailles dans notre projet.

En modifiant cette taille, nous rendons effectivement nos rems "plus grandes" ou "plus petites" visuellement. Notre générateur visuel de responsive fluide fonctionne grâce à un ensemble de calculs qui modifient la taille de la police racine en fonction de nos préférences.

L'ajout du code CSS généré permet à notre projet Webflow de suivre des règles de mise à l'échelle personnalisées. La modification de la taille de la police HTML à travers des points de rupture (breakpoints) nous offre une personnalisation ultime pour notre responsive.

Avantages :

  • Utilisez Client-First comme vous le faites habituellement. Il n'y a pas de modification spécifique du flux de travail pour les sites responsive fluides par rapport aux sites responsive non fluides.
  • La stratégie de responsive fluide est un ajout facultatif (un bonus). Vous pouvez l'ajouter, ou non, à n'importe quel projet.
  • La stratégie de responsibe fluide peut être ajoutée à la fin du projet, une fois que tout est développé.
  • Les navigateurs font un zoom classique.
  • Les paramètres de taille de police des navigateurs définis par les utilisateurs sont respectés.
  • La maintenance d'un projet Webflow en rem est plus facile que celle d'un projet utilisant des tailles fixes basées sur vw ou vh.

Construire visuellement un système de responsive fluide

  1. Configurez visuellement les règles de mise à l'échelle du responsive fluide.
  2. Copiez le code CSS dans le projet Client-First Webflow.
  3. Profitez d'un site responsive fluide en rem.
Prochain

Balises sémantiques HTML

Apprenez à utiliser et à configurer au mieux les balises sémantiques HTML dans Webflow.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reset
HTML font size
px
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
px values
rem values
2px
=
0.125rem

Closest to Client-First values

2px
=
0.125rem

Neighboring values

2px
=
0.125rem