Maîtriser la conception Web réactive avec les fonctions mathématiques CSS

Les maths c'est bien, les maths c'est bien, mais voulez-vous passer votre temps à faire des calculs alors que votre feuille de style peut le faire pour vous ?

CSS est livré avec trois fonctions mathématiques pratiques qui changeront la façon dont vous concevez vos sites Web. Nous allons vous montrer comment et pourquoi vous devriez les utiliser.

Introduction des mathématiques au CSS

CSS est principalement déclaratif, mais des révisions ont introduit des fonctions dans le langage. Il existe maintenant de nombreuses fonctions dans la spécification, et trois des fonctions mathématiques les plus simples peuvent s'avérer très utiles: calc, max et min.

Vous pouvez utiliser cet exemple simple de CodePen pour aider à suivre avec le guide.

Fonction mathématique CSS calc()

La fonction CSS calc() effectue un calcul simple et utilise le résultat comme valeur de propriété. Cela signifie que vous pouvez attribuer des valeurs dynamiques à des propriétés telles que la hauteur et la largeur, le tout sans Requêtes CSS @media.

Cette fonction prend en charge l'addition (+), la multiplication (*), la soustraction (-) et la division (/) avec un seul opérateur.

Exemple: Création d'un espacement régulier sur les tailles d'écran

Faire en sorte qu'une page Web se ressemble à différentes tailles peut être difficile, même si vous utilisez des unités CSS dynamiques comme vw et %. La fonction CSS calc() change cela.

Comme vous pouvez le voir dans l'image ci-dessus, la barre de titre qui traverse l'écran a un espacement différent en fonction de la taille de l'écran. C'est parce que nous avons défini la largeur sur 80vw, en définissant l'espacement sur 20vw; une valeur variable.

Si nous utilisons calc() à la place, nous pouvons définir l'espacement pour qu'il soit le même sur toutes les tailles d'écran. La propriété que nous utilisons pour cela ressemble à ceci :

largeur: calc (100vw - 400px) ;

Cela définit la largeur de notre barre de titre à 400 pixels de moins que la largeur de la page, créant un espacement uniforme quelle que soit la taille de l'affichage.

Fonction mathématique CSS max()

La fonction CSS max() sélectionne la valeur la plus élevée d'un pool pour ajouter une valeur à une propriété CSS. Vous pouvez ajouter autant de valeurs potentielles que vous le souhaitez, chacune séparée par une virgule, mais seule la plus élevée sera utilisée.

Exemple: Restreindre la hauteur de la barre de navigation

L'orientation est l'un des principaux défis qui accompagnent la conception Web réactive. Un site qui fonctionne sur un grand écran d'ordinateur en mode portrait doit également avoir une belle apparence sur un écran mobile en mode portrait plus petit.

Cela peut rendre une valeur de propriété excellente sur ordinateur et mauvaise sur mobile, tout comme le montre l'image ci-dessus. Notre barre de navigation a une hauteur définie de 10vh, mais cela rend la barre mince sur les appareils de bureau.

Nous pouvons utiliser la fonction CSS max() pour résoudre ce problème :

hauteur: max (10vh, 80px) ;

En ajoutant une règle comme celle-ci, nous pouvons définir une hauteur minimale de 80px pour notre barre de navigation, tout en conservant la valeur de 10vh si elle est supérieure.

Fonction mathématique CSS min()

La fonction min() est comme la fonction max(), mais elle choisit la valeur la plus basse d'un pool à utiliser comme valeur de propriété.

Exemple: Définition d'une taille de texte maximale

Que vous utilisiez ou non une valeur dynamique, obtenir la taille du texte sur toutes les plateformes peut être délicat. Nous pouvons utiliser la fonction CSS min() pour définir deux ou plusieurs valeurs de propriété potentielles pour la taille du texte de notre en-tête principal, et elle utilisera la plus petite.

Utilisant un taille de police: 10vh ; La propriété sur le texte de l'en-tête principal dans notre exemple rend le texte beau sur le bureau, mais beaucoup trop volumineux sur les appareils mobiles.

Pour changer cela, vous pouvez utiliser la fonction CSS min() pour fournir un dimensionnement alternatif :

taille de police: min (10vh, 10vw) ;

Cet exemple fonctionne car les écrans mobiles sont hauts et fins, tandis que les écrans de bureau sont larges et courts. Cela signifie que l'unité de largeur de vue (vw) est plus petite sur mobile que sur ordinateur.

Utilisation des mathématiques pour la conception Web réactive

Les fonctions mathématiques fournies avec CSS offrent un moyen unique de créer facilement des sites Web réactifs. Il vous suffit de les configurer correctement pour commencer.

Bien sûr, il existe d'autres méthodes et fonctions CSS que vous pouvez utiliser pour créer un site qui a fière allure sur toutes les plateformes.

Comment créer une barre de navigation réactive en utilisant HTML et CSS

Lire la suite

A propos de l'auteur