La différence entre les unités CSS absolues et relatives

Choisir les bonnes unités CSS est plus qu'un détail technique. C'est ce qui aide votre conception à rester cohérente, flexible et réactive sur tous les appareils. Les pixels peuvent sembler l'option facile, mais ils ne se comportent pas toujours de manière prévisible sur différents écrans.

Dans cet article, nous expliquerons la différence entre les unités absolues et relatives, et montrer comment Divi 5 vous aide à les utiliser plus efficacement dès le début.

Les unités CSS ont expliqué: Pourquoi comptent-ils pour votre site Web?

Les unités CSS contrôlent la taille de tout sur votre site. Choisissez mal et votre conception se casse sur différents appareils.

La plupart des gens utilisent des pixels parce qu'ils sont simples et faciles à comprendre. Mais les pixels ne s'adaptent pas naturellement à la conception réactive. Ils nécessitent des requêtes multimédias ou des fonctions CSS comme clamp () pour répondre aux modifications d'écran.

D'autres unités s'adaptent automatiquement. Les unités de la fenêtre évoluent avec la fenêtre du navigateur. Des unités relatives comme la taille EM sont basées sur le texte environnant. Différentes unités résolvent différents problèmes. Choisissez bien et votre conception s'adapte sur les appareils sans travail supplémentaire.

Faire tomber des unités absolues: lorsque les tailles fixes fonctionnent le mieux

Les unités absolues gardent la même taille, peu importe ce qui se passe autour d'eux. Si vous définissez quelque chose sur 20 pixels de large, il reste 20 pixels, que quelqu'un le regarde sur un téléphone ou un moniteur de bureau massif. La valeur ne change jamais en fonction de la taille de l'écran, des éléments parents ou des paramètres du navigateur.

Les pixels (PX) gouvernent cet espace. D'autres unités absolues comme les centimètres, les millimètres et les pouces existent, mais ils appartiennent à la conception imprimée où les mesures physiques comptent. Pour la conception Web, les pixels gèrent presque toutes les mesures absolues dont vous aurez besoin.

Pourquoi les pixels fonctionnent très bien pour les petits détails

Certains éléments de conception nécessitent un contrôle exact. Une bordure de 1 pixel doit être nette et mince partout. Drop shadows a besoin de précision pour bien paraître. Les petites icônes fonctionnent mieux lorsqu'ils restent cohérents entre les appareils.

Les pixels fonctionnent parfaitement pour ces minuscules détails. Votre bordure de bouton doit avoir précisément 2 pixels d'épaisseur, cette ombre subtile doit être exactement compensée à 4 pixels et votre icône de navigation doit être exactement de 24 pixels carré pour un alignement parfait.

Ces mesures n'ont pas besoin de mettre à l'échelle avec la taille de l'écran. Une bordure de 1 pixel sur le bureau doit rester 1 pixel sur mobile. Le faire de 2 pixels sur mobile serait épais et maladroit.

D'autres éléments fonctionnent également bien avec les pixels. Les logos de marque utilisent souvent des pixels pour la cohérence de la marque. Les petits éléments décoratifs comme les points ou les lignes nécessitent un dimensionnement exact. Les filateurs de chargement et les barres de progression fonctionnent mieux avec les dimensions fixes.

Rendre les pixels réactifs avec les requêtes multimédias

Les pixels ne sont pas complètement rigides. Les requêtes multimédias vous permettent d'échanger différentes valeurs de pixels à différentes tailles d'écran. Votre cap peut utiliser du texte de 32 pixels sur le bureau, puis sauter à 28 pixels sur les tablettes et 24 sur les téléphones.

Cette approche prend plus de travail que les unités relatives. Vous devez définir des points d'arrêt et écrire des règles distinctes pour chaque taille d'écran, mais vous avez un contrôle total sur l'apparence des choses sur chaque taille.

Cette approche fonctionne bien lorsque vous voulez un contrôle spécifique à chaque taille d'écran. Vous décidez exactement à quoi ressemble votre texte sur les téléphones par rapport aux tablettes par rapport aux ordinateurs de bureau à des dimensions spécifiques. Pas de surprise.

Le CSS supplémentaire en vaut la peine pour des éléments qui nécessitent un dimensionnement précis. Les logos semblent mieux lorsqu'ils restent exactement la bonne taille pour chaque appareil. Les éléments de navigation ont souvent besoin de dimensions spécifiques pour fonctionner correctement. Les bordures et les ombres décoratives dépendent de mesures exactes pour paraître croustillante.

Comprendre les unités relatives: l'approche flexible de la conception Web

Les unités relatives, en revanche, s'étendent et se rétrécissent en fonction de ce qui les entoure. Cette flexibilité fait fonctionner les sites Web sur les téléphones, les tablettes et les ordinateurs sans se casser. Contrairement aux unités absolues qui restent fixes, les unités relatives s'adaptent à la taille de l'écran, aux éléments parents ou aux préférences des utilisateurs.

Ces unités résolvent les problèmes créés par les pixels. Votre bouton de 75 pixels fonctionne bien sur le bureau mais devient dominant sur le mobile. Les unités relatives s'ajustent automatiquement, vous épargnant de l'écriture de styles séparés pour chaque taille d'écran.

Comment les unités EM se construisent les unes sur les autres

Les unités EM sont relatives à la taille de la police de leur élément parent immédiat. Si votre taille de police de base est de 16px et que vous définissez un conteneur sur la taille de la police: 1.25EM, cela devient 20px. Un élément enfant à l'intérieur de celui-ci réglé sur 1.5EM sera désormais 30px (1,5 × 20px), pas 24px, car il est basé sur le parent, pas sur la racine.

Cet effet de composition est puissant pour l'espacement évolutif autour du texte. Mais si vous gardez des éléments de nidification avec des tailles de police basées sur EM, vos valeurs peuvent augmenter rapidement en taille. Les unités EM fonctionnent mieux pour le rembourrage, la marge ou les éléments étroitement liés au texte à proximité. Pour un dimensionnement cohérent sur votre mise en page, envisagez d'utiliser REM à la place.

Les unités REM gardent les choses simples

REM regarde toujours l'élément HTML racine. Réglez quelque chose sur 2Rem et c'est la même taille partout sur votre page.

La plupart des navigateurs par défaut à 16px pour la racine. SO 1REM = 16PX, 2REM = 32PX. Changez la taille de la racine et tout est basé sur les échelles basées sur REM.

Les unités de la fenêtre suivent votre écran

Les unités de la fenêtre évoluent avec la fenêtre de votre navigateur. 50VW = moitié de la largeur de l'écran et 100VH = hauteur pleine écran. C'est super pour les sections de héros qui remplissent l'écran.

Les navigateurs mobiles ne jouent généralement pas bien avec les unités de fenêtre. La barre d'adresse se cache et affiche lorsque vous faites défiler, et votre section 100VH peut être coupée lorsque la barre d'adresse apparaît.

VMIN et VMAX comparent la largeur et la hauteur de votre écran, puis choisissez-en un. VMIN utilise ce qui est plus petit. Sur un téléphone maintenu en position verticale, la largeur est plus petite, donc 50vmin = 50% de la largeur. Tournez dans le paysage et la hauteur devient plus petite, de sorte que 50 VMIN passe à 50% de la hauteur. Vmax fait l'inverse: il choisit toujours la plus grande dimension. Ceci est utile pour les éléments qui doivent évoluer avec la mesure plus importante.

Pourcentages s'adapter aux conteneurs

Les largeurs basées sur le pourcentage sont toujours liées à la largeur de l'élément parent. Les pourcentages de hauteur peuvent évoluer de la même manière, mais seulement si le parent a une hauteur définie; Sinon, ils peuvent ne pas fonctionner comme prévu.

Les pourcentages de rembourrage et de marge sont toujours calculés à partir de la largeur du parent, même pour les valeurs supérieures et inférieures. Cela permet de créer un espacement cohérent et des dispositions proportionnelles, en particulier dans les conceptions fluides.

La différence

Les unités absolues sont comme un souverain rigide, tandis que les unités relatives se comportent davantage comme une bande de mesure. Les deux mesurent les choses, mais ils réagissent très différemment lorsque les conditions changent. Voici comment ils se comparent:

La plupart des développeurs finissent par utiliser les deux: des pixels pour les petites choses qui doivent rester des unités nettes et relatives pour les grandes pièces structurelles qui doivent fléchir.

Choisir les bonnes unités pour votre conception

Différentes parties de votre site Web ont besoin de différentes approches. Certains éléments restent de la même taille partout, tandis que d'autres s'adaptent en fonction de la taille de l'écran ou des paramètres utilisateur. La plupart des développeurs réfléchissent à cela. Il y a un moyen plus simple: correspondez à l'unité à ce que vous voulez que cet élément fasse.

Pensez d'abord à vos utilisateurs

Les gens parcourent votre site de manière inattendue. Quelqu'un visite son téléphone. Votre texte a l'air minuscule, alors ils pincent pour zoomer. Si vous avez construit avec des unités REM, tout se développe proportionnellement. Si vous avez utilisé des pixels partout, les choses commencent à se chevaucher et à se briser.

La navigation principale nécessite un dimensionnement cohérent entre les pages. Les unités REM l'attachent à la taille de votre police de base. Votre logo a besoin de dimensions exactes pour la cohérence de la marque. Les pixels le gardent croustillant.

De nombreux utilisateurs modifient la taille de la police par défaut de leur navigateur pour une meilleure lisibilité. Lorsque vous cocotez des pixels, vous ignorez leurs préférences. Si quelqu'un zoome à 125%, votre disposition basée sur des pixels s'effondre. Les unités relatives s'adaptent automatiquement.

Façons rapides de choisir la bonne unité

Voici comment décomposer vos choix sans se perdre dans les détails:

• Texte et espacement autour de lui: utilisez-les ou rem. Échelles de rembourrage de bouton avec la taille du texte. Les marges restent proportionnelles aux titres.
• Éléments liés à l'écran: utilisez des unités de fenêtre. Des sections de héros qui remplissent la plupart des écrans. Les barres latérales qui prennent des pourcentages d'écran spécifiques.
• Éléments nécessitant un contrôle exact: utilisez des pixels. Des bordures minces qui restent croustillantes. Petites icônes avec un alignement parfait. Déposez les ombres avec des décalages précis.
• Éléments basés sur les conteneurs: utilisez des pourcentages. Des grilles flexibles qui s'adaptent aux parents. Images qui évoluent avec des conteneurs.

Commencez simple. Utilisez des pixels pour les bits décoratifs, REM pour le texte et l'espacement connexe, les unités de fenêtre pour les sections de la taille d'un écran et les pourcentages pour les conteneurs flexibles. Choisissez un système pour les éléments connexes et respectez-le.

Erreurs d'unité CSS courantes pour éviter

Vous choisissez des pixels pour tout parce qu'ils se sentent en sécurité. Votre bouton est parfait avec 75 pixels de large sur votre ordinateur portable. Ensuite, quelqu'un ouvre votre site sur son téléphone, et ce même bouton mange la moitié de l'écran. Votre logo a besoin de dimensions exactes, mais vos zones de contenu ont besoin de flexibilité. Mélangez ces approches au hasard et vous créez le chaos. Voici donc quelques conseils pour éviter les erreurs standard des unités CSS:

1. Choisir des pixels pour tout

Les pixels se sentent en sécurité car 20 pixels signifie 20 pixels. Simple, non? Votre barre latérale de 300 pixels fonctionne bien sur le bureau. Sur le mobile, il devient un bloc massif qui écrase votre contenu en une mince bande. Votre texte de 16 pixels devient illisible sur les écrans haute densité.

Lorsque quelqu'un augmente la taille de la police de son navigateur, votre disposition basée sur les pixels ne s'adapte pas. Texte déborde des conteneurs. Les boutons disparaissent derrière d'autres éléments. Votre barre latérale s'écrase dans votre contenu principal.

Enregistrez des pixels pour des choses qui ont vraiment besoin de contrôle exact: les bordures minces, les petites icônes et les ombres. Pour tout le reste, essayez d'utiliser des unités relatives.

2. Les unités EM se multiplient hors de contrôle

Les unités EM sont en fonction de la taille de la police de leurs parents. Cela semble flexible, jusqu'à ce que vous commencez à nicher. Disons que votre conteneur utilise 1.2EM et que votre direction à l'intérieur utilise 1.5EM. Ce titre devient 1.8EM par rapport à la racine car 1,2 × 1,5 = 1,8. Gardez la nidification et les tailles peuvent faire boule de neige. Changez une taille de police parent et tout se déplace en aval.

Les unités REM corrigent ceci. Ils font toujours référence à l'élément racine, donc 2Rem signifie la même chose, peu importe où il est utilisé. Cela rend votre typographie plus facile à évoluer et à contrôler.

3. Unités de fenêtre qui sautent sur mobile

Réglez votre section héros sur 100 VH et il remplit parfaitement l'écran. Sauf que les navigateurs mobiles se cachent et affichent leurs barres d'adresse lorsque vous faites défiler. Safari sur iOS et Chrome sur Android font tous cela. Lorsque la barre d'adresse disparaît, votre section 100VH devient soudainement trop grande. Lorsqu'il réapparaît, votre contenu est coupé.

L'unité DVH plus récente s'adapte à la taille de la fenêtre changeante. Le support du navigateur est toujours en train de rattraper son retard. En tant que repli, une solution JavaScript utilisant les propriétés personnalisées CSS fonctionne.

Rompre l'accessibilité avec des tailles fixes

Les utilisateurs ajustent souvent la taille de la police par défaut de leur navigateur pour améliorer la lisibilité. Lorsque vous codez du texte, les boutons et l'espacement à l'aide de pixels fixes, votre disposition peut se casser - le texte peut déborder, les boutons peuvent devenir inutilisables et les éléments critiques peuvent disparaître à des niveaux de zoom plus élevés.

Les cibles tactiles sont recommandées pour être d'au moins 44 × 44 pixels CSS, selon des directives d'accessibilité telles que les normes de WCAG et d'Apple. Des cibles plus petites peuvent être difficiles pour que les utilisateurs ayant des déficiences motrices puissent exploiter avec précision.

Au lieu de verrouiller des tailles fixes, utilisez des unités évolutives comme REM pour créer des dispositions qui respectent les préférences des utilisateurs. Réglez la taille de votre police de base sur l'élément, puis l'échelle des en-têtes, les boutons et l'espacement avec des unités relatives sur votre site.

5. Texte de texte sur des écrans à haute densité

Différents appareils emballent différemment les pixels. L'écran de votre téléphone peut avoir 400 pixels par pouce tandis que votre moniteur en a 100. Le même nombre de pixels semble complètement différent sur chaque appareil.

Votre texte de 14 pixels a l'air bien sur un moniteur de bureau. Sur un écran de téléphone haute densité, ces mêmes 14 pixels deviennent microscopiques. Les utilisateurs plissent les yeux et le pincement pour zoomer.

Les systèmes d'exploitation et les navigateurs gèrent automatiquement la mise à l'échelle lorsque vous utilisez des unités relatives. Votre texte 1REM devient plus grand sur les écrans à haute densité et plus petits sur ceux à basse densité.

6. Mélanger les unités sans plan

Vous utilisez REM pour certains titres, EM pour d'autres et des pixels pour le texte du corps. Votre conception manque de rythme car différents éléments évoluent à des taux différents. Choisissez un système pour les éléments connexes. Si vos titres utilisent REM, tous vos titres doivent utiliser REM. Si votre espacement les utilise, continuez à les utiliser pour un espacement connexe.

Testez vos choix entre les appareils et les paramètres des utilisateurs. Vérifiez à quoi ressemble votre conception lorsque quelqu'un augmente la taille de sa police. Quelques minutes de test permettent d'économiser des heures de corrections de bogues plus tard.

Comment les unités avancées de Divi 5 simplifient la gestion CSS

La lutte avec des unités CSS vieillit rapidement. Vous passez des heures à peaufiner des valeurs, à tester différents appareils et à fixer des dispositions cassées. Divi 5 change complètement cela. Le nouveau système retire la conjecture de la sélection de l'unité et vous donne un contrôle visuel sur un comportement réactif sans toucher le code. Mais d'abord, comprenons ce qu'est Divi.

Qu'est-ce que Divi?

Divi est un constructeur de sites Web qui transforme WordPress en quelque chose qui a du sens pour les gens qui veulent que leurs sites soient beaux.

Faites glisser l'un des 200+ modules autour de votre page. Changez le texte là où il se trouve. Choisissez de nouvelles couleurs et regardez-les apparaître immédiatement. Vous travaillez sur la vraie chose, pas un mode d'aperçu qui vous réside.

Le thème comprend plus de 2000 mises en page qui ne sont pas nuls. De vrais conceptions pour les restaurants, les photographes, les consultants et des dizaines d'autres entreprises. Trouvez un que vous aimez et modifiez-le jusqu'à ce que cela se sente bien.

Le constructeur de thèmes vous permet de tout contrôler. Créez des en-têtes qui ne semblent pas génériques, créez des pages de blog exceptionnelles et transformez vos 404 pages en quelque chose que les gens pourraient réellement vouloir voir.

Créer des sites Web à l'aide de l'IA

Divi Ai fonctionne juste à l'intérieur de votre zone de conception. Besoin de texte? Il l'écrit.

Vous voulez des images? Ça les fait. Vous pouvez même décrire les modifications photo, et elle gère le travail.

De même, pour le code et les nouvelles sections.

Les sites rapides divi résout ce moment terrible lorsque vous regardez une page vide sans aucune idée par où commencer. Choisissez parmi les sites de démarrage que notre équipe a conçu, avec des images originales et des illustrations.

Ou décrivez votre entreprise pour diviser les sites rapides + divi Ai et laissez-le construire quelque chose à partir de zéro.

Ces sites construits en IA auront de véritables titres, copies et images qui correspondent à ce que vous lui avez dit. Générez tout avec l'IA, prenez des photos de Unplash ou déposez dans les espaces réservés pour vos propres photos. Réglez d'abord vos polices et vos couleurs, puis laissez l'IA contourner. Vous pouvez toujours tout modifier par la suite.

Quoi de neuf dans Divi 5

Divi 5 reconstruit tout à partir de zéro. Nous avons annulé l'ancien système de raccourcis et construit quelque chose qui fonctionne mieux avec les normes Web d'aujourd'hui. Les sites se chargent plus rapidement, l'éditeur répond plus rapidement et vous avez accès à des outils impossibles auparavant.

Mais quoi de neuf? Jetez un œil:

Système de mise en page Flexbox

La construction de sites Web modernes et réactifs en Divi est désormais plus rapide et plus intuitif. Nous avons introduit un système de mise en page Flexbox complet en Divi 5, vous donnant des contrôles simples pour l'alignement vertical, l'emballage de contenu et l'espacement. Créez les dispositions exactes que vous souhaitez sans vous battre avec du code ou en utilisant des solutions de contournement complexes.

Presets de groupe d'options

Les préréglages du groupe d'options vous permettent d'enregistrer des styles que vous pouvez mélanger et assortir n'importe où. Faites un style d'ombre une fois, puis utilisez-le sur des boutons, des cartes, des sections, quoi qu'il en soit. Mettez à jour le préréglage et tout change instantanément sur l'ensemble de votre site.

Variables de conception

Les couleurs de marque, les polices et l'espacement vivent tous à un seul endroit maintenant. Vous pouvez passer du bleu au vert en modifiant une variable. L'ensemble du site se met à jour automatiquement, vous n'aurez donc pas à chasser des dizaines de modules.

Unités avancées

Maintenant, vous pouvez utiliser toutes les unités CSS avancées avec Divi 5: de PX à VW / VH. Les fonctions CSS fonctionnent également directement dans le constructeur maintenant. Vous voulez une section qui représente 80% de la hauteur d'écran moins votre en-tête? Tapez Calc (80VH - 100px) et vous êtes prêt. L'interface gère CLAMP (), min (), max (): toutes ces astuces réactives.

Rangées imbriquées

Les lignes vont maintenant à l'intérieur d'autres lignes, aussi profondément que vous en avez besoin. Construisez des dispositions de magazines complexes ou des pages de produits détaillées sans combattre la structure. Chaque niveau vous donne un contrôle total sur l'espacement et le comportement de l'appareil.

Édition en un clic

Point et cliquez n'importe où sur votre page pour commencer l'édition. Les jours de recherche de minuscules boutons d'édition ou de navigation dans plusieurs menus sont derrière nous.

Points d'arrêt personnalisables

Au lieu d'être coincé avec trois, les points d'arrêt personnalisables de Divi 5 vous permettent d'activer sept tailles d'écran différentes. Définissez chaque point d'arrêt exactement où votre conception en a besoin, que ce soit 1200px pour les grands moniteurs, 900px pour les tablettes ou 650px pour les téléphones.

Espace de travail multi-panel

Organisez vos panneaux d'espace de travail comme vous le souhaitez. Gardez les panneaux de réglage multiples ouverts simultanément au lieu de sauter constamment entre différentes zones d'interface.

Gestion des attributs

Copiez des éléments spécifiques entre différentes parties de votre site avec une précision chirurgicale. Prenez juste l'espacement d'un élément, juste les couleurs d'un autre, ou juste les préréglages d'un tiers. Plus de transferts tout ou rien.

Échelle de toile

Ajustez la taille de votre espace de travail pour prévisualiser comment votre site apparaît sur différents appareils. Voir les vues mobiles, tablettes et de bureau sans passer à des modes d'aperçu séparés.

Améliorations des performances

Tout se sent plus snapp. Les pages se chargent plus rapidement, le constructeur répond plus rapidement et les dispositions complexes ne s'enlèvent pas l'interface comme ils le faisaient auparavant.

Groupes de modules

Regrouper plusieurs modules en un seul conteneur. Traitez les blocs de texte, les images et les boutons en une seule unité. Déplacez-les ensemble, coiffez-les et copiez le tout sur d'autres pages.

Système de couleur HSL

Construisez des schémas de couleurs avec des commandes de teinte, de saturation et de légèreté. Créez des variations de couleur de marque qui semblent professionnelles. Les mathématiques crée automatiquement des combinaisons agréables.

Plus sont en route…

• Loop Builder: Build Modèles pour répéter du contenu comme les grilles de blog ou les listes de produits. Concevez-le une fois, laissez le système le remplir de votre contenu réel.
• Modules WooCommerce: modules spécifiques au magasin pour les grilles de produit, les pages de produits individuelles et les fonctionnalités de CART. Tous les magasins en ligne ont besoin, spécialement conçus pour la vente.

Utilisation de variables CSS dans Divi 5

Le style de site Web devient fastidieux lorsque vous avez besoin de valeurs cohérentes sur plusieurs éléments. Les variables CSS résolvent cela en stockant des valeurs réutilisables en un seul endroit. Divi 5 prend en charge à la fois les variables CSS traditionnelles et son propre système de variables de conception, vous donnant une flexibilité dans la façon dont vous gérez l'apparence de votre site.

Divi 5 accepte toute unité CSS directement dans ses champs d'entrée. Écrivez des valeurs REM, VW ou pour pourcentage où vous ne pouviez auparavant utiliser des pixels. Le constructeur traite ces unités immédiatement sans configuration supplémentaire.

Les fonctions CSS fonctionnent de la même manière. Entrez la pince (1rem, 4vw, 3rem) pour la typographie fluide ou Min (500px, 90%) pour les largeurs réactives. Le constructeur visuel gère ces calculs en temps réel lorsque vous concevez.

Les variables s'intègrent parfaitement à ce système. Définissez une variable CSS comme –Header-Height: 80px, puis référez-la en utilisant var (–header-height) dans n'importe quel champ. Divi reconnaît la syntaxe et applique automatiquement votre valeur stockée.

Cette intégration directe signifie que vous pouvez mélanger les unités traditionnelles, les fonctions CSS modernes et les variables dans le même projet. Utilisez des pixels pour les bordures, les unités de la fenêtre pour les sections et les variables pour les mesures répétées.

Variables de conception: une meilleure façon d'appliquer des unités avancées

Les variables de conception sont l'alternative intégrée de Divi 5 aux variables CSS. Ils fonctionnent entièrement via l'interface visuelle sans nécessiter aucune connaissance de code. Vous créez et gérez ces variables à l'aide du panneau de gestionnaire de variables de Divi.

Ces variables s'étendent au-delà des nombres et des couleurs simples. Stockez des URL d'image complètes, du contenu texte ou des valeurs de style complexes. Lorsque vous mettez à jour une variable de conception, chaque élément l'utilisant change instantanément sur l'ensemble de votre site Web.

Divi 5 propose plusieurs types de variables pour gérer différents besoins de contenu:

• Les variables de couleur stockent les codes hexadécimaux, les gradients, les couleurs de la marque, les couleurs de texte, les arrière-plans et les bordures.
• Les variables de police gèrent la typographie à l'échelle mondiale au-delà des limitations de personnalisation du thème et fonctionnent pour tous les zones de texte.
• Les variables de nombre acceptent une unité CSS plus des fonctions CSS comme CLAMP (), CALC (), Min () et Max () pour l'espacement, le dimensionnement et l'animation.
• Les variables d'image stockent des images réutilisables comme les logos, les arrière-plans et les motifs.
• Les variables de texte stockent des chaînes de texte réutilisables comme les coordonnées, les étiquettes et les détails de l'entreprise.
• Les variables d'URL stoptent des liens réutilisables pour les médias sociaux, les affiliés, les promotions et les liens Tel / Mailto.

Configuration des unités CSS avec des variables de conception de numéro

Les variables de nombre vous donnent les éléments constitutifs des conceptions qui restent cohérentes. Ils fonctionnent mieux lorsque vous répétez la même mesure sur différents éléments. De plus, ils sont beaucoup plus simples que la lutte avec le code CSS.

Trouvez le gestionnaire de variables dans votre interface divi. Créez une nouvelle variable de numéro et donnez-lui une valeur qui correspond à votre conception. Utilisez des noms clairs comme «bouton-pading» ou «section-gap» au lieu de vagues étiquettes.

Création de votre bibliothèque variable

Vous pouvez ajouter des variables communes, telles que:

• «Button-Height» à 3rem - Échelle des boutons avec taille de texte
• «Section-padding» à 8vh - l'espacement s'adapte à la hauteur de l'écran
• «Border-Radius» à 0,5rem - les coins arrondis restent proportionnels
• «Hero-Height» à 75VH - Les sections de héros remplissent la plupart des écrans
• «Fine frontière» à 1px - les lignes nettes restent tranchantes
• «Fluid-Text» à Clamp (1rem, 2,5 VW, 2REM) - Texte échelle en douceur
• «Contenu-largeur» à Min (90%, 1200px) - Les conteneurs restent lisibles
• «Dynamic-Gap» à CALC (2REM + 2VW) - L'espacement augmente avec la taille de l'écran

Appliquez-les dans vos paramètres de module, de section ou de ligne.

Vos variables REM évoluent avec la taille du texte. Les unités VH s'adaptent aux écrans plus petits. Les variables avec clamp () ajustent automatiquement entre vos valeurs minimales et maximales.

Construire des préréglages connectés

Après avoir stylé votre élément avec des variables, enregistrez l'espacement en tant que préréglage du groupe d'options. Ce préréglage contient désormais des références à vos variables de nombre.

Lorsque vous appliquez ce préréglage à d'autres modules, ils héritent du même espacement basé sur la variable. Mettez à jour «Card-Padding» de 2REM à 3REM dans le gestionnaire de variables, et chaque élément utilisant ce préréglage met à jour automatiquement.

Le préréglage reste le même, mais les valeurs changent. Cela fonctionne pour toutes les variables de conception: couleurs, polices, images, texte et URL. Vos préréglages deviennent dynamiques au lieu de statiques, ce qui rend possible les mises à jour à l'échelle du site avec un seul changement.

Créez de meilleurs sites Web avec les unités CSS et Divi 5

Obtenir correctement les unités CSS modifie la façon dont vous créez des sites Web. Vous réglerez moins de dispositions cassées et créez des conceptions qui fonctionnent sur les appareils. Les pixels clouent des détails précis. Les unités relatives s'adaptent à différents écrans et préférences des utilisateurs.

Divi 5 fait un bâtiment avec des unités CSS avancées un jeu d'enfant. Tapez n'importe quelle unité dans le constructeur et voyez les résultats instantanément. Les variables de conception gardent des mesures cohérentes sur votre site. Modifiez une valeur et tout est connecté à jour automatiquement.

Vos sites Web méritent mieux que les batailles de point d'arrêt et les correctifs de mise en page sans fin. Essayez Divi 5 et regardez les unités CSS transforment les séances de conception frustrantes en flux de travail en douceur.