Comment choisir la meilleure unité CSS pour créer de meilleures mises en page de site

Les unités CSS sont l'un des aspects les plus fondamentaux à prendre en compte lors de la création d'une mise en page de site. Ces unités définiront comment votre conception interagira sur divers appareils.

Mais en ce qui concerne les unités CSS, il existe de nombreuses options parmi lesquelles choisir et toutes les options ne sont pas égales. Les unités CSS ne sont pas limitées aux polices uniquement, donc en tant que développeur frontal, vous devez également comprendre comment ces unités affectent les mises en page.

Dans cet article, nous allons vous montrer comment fonctionnent différentes unités CSS, afin que vous puissiez les utiliser pour créer de meilleures mises en page et conceptions de sites.

Types d'unités CSS

Les unités CSS peuvent être séparées dans les catégories suivantes :

• Unités absolues
• Unités relatives à la police
• Unités relatives de la fenêtre

Unités absolues

Certaines unités dépendent de certaines valeurs absolues et ne sont pas affectées par la taille de l'écran ou les polices. Ces unités d'affichage peuvent varier en fonction des différentes résolutions d'écran, car elles dépendent du DPI (points par pouce) des écrans.

Ces unités sont :

• pixels (pixels)
• en pouces)
• cm (centimètre)
• mm (millimètre)
• pc (picas)
• pt (points)

pixels

Les pixels sont l'unité la plus couramment utilisée et acceptée. Et il est considéré comme la base de mesure de nombreuses autres unités. Il fournit le résultat le plus cohérent parmi les différents appareils.

L'élément box dans l'exemple suivant a une hauteur de 150px et une largeur de 150px, et il restera le même sur toutes les tailles d'écran.

[css]
.boîte{
hauteur : 150px ;
largeur : 150 px ;
}
[/cs]

Toutes les autres unités absolues telles que in (pouces), cm (centimètre) et mm (millimètre) sont des unités de mesure réelles avec très peu de cas d'utilisation CSS réels.

Cependant, il est toujours bon de comprendre leur relation avec les pixels, voici comment ils se comparent :

• 1in = 96px
• 1cm = 37.8px
• 1 mm = 3,78 pixels

Alors que pc (picas) et pt (points) sont directement liés aux pouces.

• 1po = 72pt
• 1po = 6pc

La relation entre toutes les unités absolues peut être démontrée comme ceci :

Rém

Hormis les pixels, toutes les autres unités absolues ont très peu ou pas de cas d'utilisation pour les CSS d'écran, mais comme ce sont des unités de mesure réelles, elles peuvent être utilisées efficacement dans les CSS d'impression. (Au cas où vous vous poseriez des questions sur les pixels, ils fonctionnent également bien dans le CSS d'impression !)

Unités relatives à la police

Certaines unités dépendent de la taille de police ou de la famille de polices du document ou de ses éléments de niveau parent. Cela comprend des unités telles que :

• em
• rem
• ex
• ch

Em

Em est une unité de longueur relative ; cela dépend de la taille de la police de l'élément parent ou du document. Par défaut, 1em est égal à 16px si aucune font-size n'est définie.

Em hérite de la taille de la taille de police de son parent immédiat. Ainsi, si un élément parent a font-size:18px , alors 1em sera mesuré comme 18px pour tous ses enfants.

Ici, nous avons une div .post avec trois enfants, .post-item , avec un titre et du texte.

[html]
<div class="poster">
<div class="post-item">
<h2>Titre</h2>
Lorem Ipsum est simplement un faux texte de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500
</div>
<div class="post-item">
<h2>Titre</h2>
Lorem Ipsum est simplement un faux texte de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500
</div>
<div class="post-item">
<h2>Titre</h2>
Lorem Ipsum est simplement un faux texte de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500
</div>
</div>
[/html]

Maintenant, le parent .post a un font-size:20px et l'élément enfant .post div a son propre font-size:1.2em avec padding:0.75em et margin:0.75em , donc le padding et la marge calculés seront de 18px (20px *1.2em*0.75em).

[css]
html{
taille de police : 20 px ;
}

.poster{
taille de police : 20 px ;
}

.post div{
taille de police : 1,2 em ;
}

.post-item{
fond : rose ;
rembourrage : 0,75 em ;
marge : 0,75 em ;
}

.post-item h2{
taille de police : 1,5 em ;
marge : 0,5 em 0 ;
}

.post-item p{
marge : 0 ;
taille de la police : 1 em ;
}
[/cs]

Comme vous pouvez le voir, les éléments enfants héritent des valeurs du parent.

L'avantage d'utiliser em est que si vous décidez de modifier la font-size , padding et margin de chaque élément proportionnellement, il vous suffit de modifier la taille de la police de l'élément parent et tous les autres éléments s'ajusteront en conséquence.

Ce ne sera pas le cas avec des unités absolues comme px, où vous devez ajuster chaque élément individuellement.

Cependant, cette nature d'héritage peut être un peu délicate à gérer si les éléments imbriqués ont également leur propre font-size dans em.

Comme dans la démo précédente, si vous enveloppez le titre et le paragraphe dans une autre div dans l'un des éléments enfants, vous verrez des résultats étranges.

[html]
<div class="post-item">
<div>
<h2>Titre</h2>
Lorem Ipsum est simplement un faux texte de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500
</div>
</div>
[/html]

Parce que post-item a un div imbriqué, la taille de base passera de 24px à 28.8px (20px*1.2em*1.2em), et font-size et margin pour h2 passeront à 43.2px (20px*1.2em*1.2em *1.5em) et 14.4px (20px*1.2em*1.2em*0.5em), respectivement.

Rém

Rem peut être très utile dans ces types de situations car ils font toujours référence à la taille de police de l'élément racine, et non à l'élément parent.

Si vous prenez l'exemple précédent et changez les unités de em à rem pour .post div , vous verrez tous les éléments enfants se corriger.

[css]
.post div{
taille de police : 1,2 rem ;
}
[/cs]

Une fois que l'unité est passée de em à rem, sa base passe de div parent à élément racine, qui a un front-size:20px .

Ainsi, le calcul sera 20px*1.2rem*value et h2 et p auront tous deux font-size et margin cohérentes, quel que soit leur parent.

Ex

Ex est relatif à la hauteur x de la police actuelle et est très rarement utilisé. La mesure de la hauteur x n'est pas cohérente ; parfois cela vient de la police elle-même et parfois le navigateur se calcule lui-même.

Comme em et rem, cela dépend de la police mais la principale différence est que ex changera également lorsque vous changerez la font-family , ce qui n'est pas le cas avec les deux autres.

[css]
.boîte{
largeur : 150ex ;
hauteur : 150 ex ;
}
[/cs]

Ch

Ch est similaire à ex mais ne dépend pas de la hauteur x ; plutôt sur la largeur du caractère zéro (0). Cela change également avec font-family .

[css]
.boîte{
largeur : 150 ch ;
hauteur : 150ch ;
}
[/cs]

Unités relatives de la fenêtre

Il existe quelques unités qui dépendent de la hauteur et de la largeur de la fenêtre, telles que :

• vh (hauteur de la fenêtre)
• vw (largeur de la fenêtre)
• vmin (fenêtre d'affichage minimale)
• vmax (fenêtre d'affichage maximale)

Vh

Vh (hauteur de la fenêtre) est mesuré comme 1vh égal à 1 % de la hauteur de la fenêtre. Cette unité est très utile pour créer des éléments pleine hauteur. Vh réagit de manière similaire au pourcentage, mais ne dépend pas de la hauteur de l'élément parent.

Vous pouvez utiliser vh n'importe où, mais le cas d'utilisation le plus courant de vh consiste à créer des éléments de pleine hauteur. Dans cet exemple, la classe full-height créera un conteneur bleu qui sera à 100 % de la hauteur de la fenêtre.

[css]
.pleine hauteur{
hauteur : 100 vh ;
fond : bleu ;
}
[/cs]

VW

Vw (largeur de la fenêtre) est similaire à vh mais il considère la largeur plutôt que la hauteur de la fenêtre. 1vw est égal à 1 % de la largeur de la fenêtre. Ces unités peuvent être très utiles si vous souhaitez créer une fenêtre d'affichage réactive basée sur la typographie.

Dans cet exemple, font-siz de h1 correspond à 6 % de la largeur de la fenêtre d'affichage. Par conséquent, si la largeur de la fenêtre d'affichage est de 1 000 px, la taille de la police sera de 60 px, et si la fenêtre d'affichage est de 500 px, la taille de la police sera de 30 px.

[css]
h1{
taille de police : 6vw ;
}
[/cs]

Vmin

Vmin est calculé sur la base de la valeur minimale de la largeur ou de la hauteur de la fenêtre, selon la valeur la plus petite. Disons que vous avez une taille de fenêtre de 1000 pixels de haut sur 800 pixels de large. 1vmin sera égal à 8px.

Vmax

Vmax est calculé exactement à l'opposé de vmin , où la valeur maximale est considérée de la fenêtre.

Comme dans l'exemple de fenêtre d'affichage précédent avec 1000 pixels de haut sur 800 pixels de large, 1vmax sera égal à 10px.

Voyons maintenant comment utiliser efficacement vmin et vmax . En utilisant notre exemple précédent, disons que nous voulons avoir un rembourrage et une marge fluides basés sur la taille de la fenêtre maintenant, plutôt qu'une valeur fixe.

Dans cet extrait de code, j'ai défini le rembourrage sur 3vmax et la marge sur 1.5vmin .

[css]
.post-item{
fond rose;
rembourrage : 3vmax ;
marge : 1,5 vmin ;
}
[/cs]

Le rembourrage et la marge changeront en fonction de la taille de la fenêtre.

Unité de pourcentage (%)

L'unité de pourcentage (%) n'appartient à aucune catégorie particulière mentionnée ci-dessus, mais peut être classée comme une unité relative. Il est relatif à son élément parent.

Le pourcentage est principalement associé à la hauteur et à la largeur d'un élément, mais peut être utilisé partout où les unités de longueur CSS sont autorisées.

Le pourcentage est l'une des unités les plus utiles pour créer une mise en page réactive ou fluide. Les frameworks populaires comme Bootstrap, Foundation et Bulma utilisent le pourcentage pour leur mise en page de base.

Ici, la classe full-width aura une largeur de 100 % de son élément parent.

[css]
.pleine largeur{
largeur : 100 % ;
}
[/cs]

Conclusion

Nous avons couvert presque toutes les unités CSS disponibles. En fonction de vos objectifs, certains seront mieux adaptés que d'autres. En tant que développeur front-end, il est toujours bon de connaître vos options car vous ne savez jamais de laquelle vous pourriez avoir besoin dans votre prochain projet.

Alors, quelles unités utilisez-vous le plus fréquemment pour obtenir le résultat souhaité ? Faites-nous savoir dans la section commentaires ci-dessous!