Utilisation de min () et max () dans Divi 5 pour créer des dispositions intelligentes

CSS Min () et Max () sont deux fonctions polyvalentes mais sous-utilisées dans la conception Web réactive, et Divi 5 a une prise en charge complète des deux depuis la mise à jour des unités avancées. Bien que nous ayons déjà exploré la typographie fluide avec CLAMP () et les calculs dynamiques avec calc (), min () et max () vous offrent des moyens encore plus simples de réaliser une conception réactive.

Dans cet article, nous vous montrerons comment utiliser ces fonctions à l'aide de Divi (Divi 5 est prêt à utiliser sur de nouveaux sites Web, avec une recommandation de migration pour les sites existants à venir bientôt). Tout ce que vous pouvez faire pour utiliser des fonctions réactives réduira votre dépendance à l'égard des requêtes médiatiques, CSS est une belle chose!

Css min () et max (): dispositions plus intelligentes avec une logique plus simple

Si vous avez déjà exploré CLAMP (), vous êtes à mi-chemin de maîtriser Min () et Max ()! Si vous vous souvenez, CLAMP () utilise trois valeurs simultanément (min, préférées et max), Min et Max dans CLAMP () est le même concept mais avec seulement 1 / 3e de la logique à un moment donné.

Que font Min () et Max ()?

Les fonctions min () et max () vous permettent de définir deux valeurs ou plus, avec le plus petit (min) ou le plus grand (max) affiché en fonction de la taille de l'écran.

Le «point de transition» est déterminé respectif aux deux valeurs que vous définissez, ce n'est donc qu'à des fins de visualisation

min (): choisit toujours la valeur plus petite

Utilisez Min () pour empêcher les écrans larges d'étirer excessivement le contenu. Ceci est idéal pour les dispositions qui ne devraient pas croître trop sur les grands écrans, mais qui devraient avoir beaucoup de flexibilité pour évoluer vers le bas à mesure que les tailles d'écran deviennent plus petites.

 width: min(100%, 500px); 

Dans cet exemple, la largeur de l'élément ne dépassera jamais 500px mais sera à 100% s'il est sous cette marque de 500px.

max (): choisit toujours la valeur plus grande

Utilisez Max () pour empêcher le contenu de devenir trop étroit ou petit, en particulier sur des écrans plus petits ou lorsque le contenu a besoin d'une taille minimale pour rester lisible ou fonctionnel. Ceci est idéal pour les dispositions qui ne devraient pas rétrécir au-delà d'un certain point sur les petits écrans (une valeur fixe) mais peuvent se développer pour accueillir des espaces plus grands (avec une valeur relative).

 width: max(80%, 300px); 

Dans cet exemple, la largeur de l'élément sera toujours la plus grande option: 80% de son conteneur ou 300px. Sur les écrans plus petits ou dans des conteneurs serrés, si 80% calcule à moins de 300 pix, l'élément aura toujours d'au moins 300 pixes de large. Sur les écrans plus grands, l'élément s'étendra à 80% de la largeur du conteneur, mais ne rétrécira jamais en dessous de 300 pix. Cette approche permet de garantir que l'élément reste utilisable sur de petits écrans tout en évoluant de manière réactive sur des plus grandes.

Pourquoi combiner des valeurs relatives et fixes en min () et max ()?

Lorsque vous rencontrez pour la première fois min () ou max () dans CSS, vous vous demandez peut-être pourquoi ils combinent souvent des valeurs comme un pourcentage et un pixel. En effet, chaque type d'unité joue un rôle différent dans la conception réactive.

Par exemple, Min (100px, 200px) se résoudra toujours à 100px. Il ne fait que choisir le plus petit des deux valeurs fixes. Mais lorsque vous mélangez des unités, comme MIN (100%, 500px), vous dites au navigateur: «Utilisez la plus petite entre 100% de la largeur du parent et 500px.» Cela le rend réactif.

Des unités relatives comme%, VW et EM s'ajustent en fonction du contexte - qu'il s'agisse de l'élément parent, de la fenêtre ou des tailles de police héritées. Les unités fixes comme PX restent constantes en CSS, ce qui les rend prévisibles.

En combinant des valeurs fixes et relatives, Min () et Max () vous permettent de construire des conceptions flexibles qui s'adaptent tout en appliquant des limites de taille.

Comment utiliser min () et max () avec divi

Maintenant que nous avons couvert les bases de min () et max (), discutons de quelques exemples.

1. Largeurs de lignes réactives avec moins de champs

Vous avez toujours été en mesure de définir une largeur et une largeur maximale sur les éléments de conteneur avec Divi. Mais en ouvrant des fonctions CSS comme min () et max (), vous pouvez faire la même chose, mais utiliser un champ de conception de moins (et sortir un peu moins CSS sur votre page également).

Dans Divi, si vous allez dans un élément (dans notre cas, une ligne), l'onglet de conception , puis pour dimensionner , vous trouverez quelques options pour ajuster la largeur. En faisant la largeur de 95% et en définissant la largeur maximale à 900px, vous avez quelque chose qui a l'air bien sur les appareils mobiles mais vous donne également une disposition avec beaucoup d'espace négatif à gauche et à droite pour les écrans de bureau.

C'est comme utiliser CSS comme celui-ci pour les lignes:

 .container {
width: 95%;
max-width: 900px;
} 

Avec les unités avancées de Divi 5, vous avez maintenant une autre option plus consolidée. Vous pouvez saisir tout ce dont vous avez besoin dans le champ de largeur et obtenir le même résultat.

C'est comme utiliser ce CSS sur le conteneur de ligne:

 .container {
width: min(95%, 900px);
} 

C'est une ligne de CSS contre deux lignes. Plus important encore, il nécessite une étape et une valeur de moins chaque fois que vous utilisez min () au lieu de définir à la fois une largeur et une largeur maximale. L'une ou l'autre option obtient le même résultat que celle démontrée dans cette vidéo:

Ce cas d'utilisation particulier n'est pas si excitant, mais il montre la puissance de min () et max () et comment il peut remplacer les anciennes déclarations CSS.

Lorsque vous utilisez Min () ou Max () pour l'espacement, le dimensionnement ou les bordures (ils peuvent être utilisés sur plus de champs dans Divi 5), je vous recommande fortement de les définir dans les préréglages de groupe d'options ou les préréglages d'élément. De cette façon, vous pouvez obtenir une mise à l'échelle cohérente, peu importe où vous les utilisez.

2. Remplacement des lignes et largeur de bordure

Ci-dessous, j'ai une conception qui garantit plus de rembourrage intérieur et une largeur de bordure plus grande à mesure que la taille des écrans s'agrandit. Pour s'adapter à cela, j'ai utilisé la fonction max () pour définir la largeur de bordure droite / gauche / supérieure / inférieure et rembourrage sur une ligne. Le CSS serait quelque chose comme ceci:

 .container {
padding: max(10px, 2vw) max(10px, 2vw) max(10px, 2vw) max(10px, 2vw);
border-width: max(5px, 1vw) max(5px, 1vw) max(5px, 1vw) max(5px, 1vw);
} 

Cela signifie que la fonction max () choisira la plus grande dans la situation à laquelle elle est appliquée. Le plus petit rembourrage de chaque côté est de 10px et le plus grand est de 2 VW. De même, pour la largeur de la frontière, le plus petit qu'il soit de 5px, et le plus grand est 1 VW).

Voici à quoi ressemble max () dans cette situation dans la conception> Espacement> rembourrage sur la ligne en divi:

Voici à quoi ressemble max () dans cette situation dans la conception> Border>Largeur de borduresur la ligne en divi:

Ensemble, j'obtiens l'effet d'avoir moins de rembourrage à l'intérieur de la ligne et d'une largeur de bordure plus mince sur les écrans plus petits. Mais il s'étend à mesure que les tailles d'écran deviennent plus grandes et que la valeur VW (rappelez-vous, c'est une valeur relative) devient plus grande que la valeur fixe des pixels.

Cela permet de maximiser la disponibilité d'écrans plus petits, tandis que les écrans plus larges peuvent remplir davantage l'espace.

3. Sections de héros à pleine hauteur

En utilisant la valeur min () sur la hauteur d'une section, vous pouvez créer une section de héros qui est au moins une certaine hauteur mais qui s'adapte autrement à 90% de la hauteur complète (et pas plus) en utilisant une fonction min () simple.

 height: min(800px, 90vh) 

Cela a pour effet d'avoir une section de héros pleine hauteur, sauf sur les écrans plus grands (plus hauts), qui afficheraient ensuite la section suivante en dessous. Dans les paramètres de dimensionnement divine, cela peut être fait avec deux entrées de champ différentes (largeur et largeur maximale), mais en utilisant la fonction min (), nous pouvons obtenir le même effet en utilisant un seul champ dans le dimensionnement.

Il maintient la section des héros comme principale chose pour la plupart des tailles d'écran, mais ne devient pas trop grande dans les quelques cas avec des résolutions d'écran plus hautes.

4. Dimensionnement des polices

L'utilisation de MIN ou MAX pour les tailles de police peut vous aider à atteindre un dimensionnement plus dynamique que les valeurs de pixels statiques. Pour cela, vous souhaitez utiliser Max () pour augmenter la taille de la police en fonction des conditions de taille de l'écran. Définissez la valeur Pixel / REM sur la petite taille absolue que vous souhaitez utiliser et utilisez une valeur relative pour évoluer vers le haut.

1REM équivaut à la taille de la police racine (généralement 16px, sauf si personnalisé dans les styles de votre site); Une taille de police de Max (1REM, 2VW) prendrait la plus grande des deux valeurs et ne serait jamais inférieure à 16px.

Comme vous pouvez le voir, sur les plus petits appareils, la taille de la police est définie sur 1REM / 16PX. À un certain point, la plus grande valeur devient 2 VW et évolue la taille de la police vers le haut, ce qui rend la police plus grande à mesure que les tailles d'écran s'agrandissent.

Pour le dimensionnement des polices, je ne recommande pas d'utiliser Min ou Max mais plutôt CLAMP (). Min / Max ne vous donne que une mise à l'échelle dynamique dans une seule direction, et pour vous rapprocher de l'effet de CLAMP (), vous devez définir vos règles de dimensionnement de polices min / max à plusieurs points d'arrêt (ce qui est possible mais beaucoup plus facile d'utiliser simplement Clamp).

Différence entre min () / max () et clamp ()

Vous pouvez comprendre Clamp () comme une combinaison de min () et max () avec une valeur préférée entre les deux. Clamp () prend une valeur pour le capuchon minimum, une valeur comme plafond maximum et une troisième valeur (au milieu) comme valeur préférée qui détermine la pente de changement entre votre min et max.

Un exemple:

 font-size: clamp(16px, 4vw, 40px); 

Cela signifie que la taille de la police que vous définissez ne sera jamais inférieure à 16px ou supérieure à 40px. Cependant, le taux qu'il change (en fonction de la taille de l'écran) est déterminé par la valeur préférée au centre.

Lisez mon article dédié sur l'utilisation de clamp () pour voir mon générateur de typographie fluide préféré qui crée vos fonctions clamp () pour vous.

Essayez min () et max () avec divi 5

Min () et max () peuvent ne pas attirer autant d'attention que clamp () ou calc (), mais ce sont des outils essentiels pour des conceptions plus intelligentes, plus simples et plus réactives dans Divi 5.

Ces fonctions CSS vous offrent des moyens uniques de contrôler la réactivité de votre site Web. Une fois que vous comprenez quand utiliser Min () et Max (), vous vous demanderez comment vous avez géré la conception réactive sans eux. Ils sont entièrement pris en charge à travers des navigateurs modernes, et Divi rend les implémentations simples. Divi 5 est prêt à être utilisé sur de nouveaux sites Web.