CSS - Unités de mesure
Lorsque vous travaillez avec CSS, vous devez souvent spécifier des mesures pour les propriétés telles que la taille de police, la largeur d'un élément, la hauteur d'une image, etc. CSS propose plusieurs unités de mesure différentes que vous pouvez utiliser pour spécifier ces mesures. Dans ce cours, nous allons passer en revue les unités de mesure les plus courantes en CSS.
Unités absolues
Les unités de mesure absolues sont celles qui sont basées sur des mesures physiques réelles, telles que les centimètres ou les pouces. Elles sont considérées comme absolues car leur valeur reste constante, quel que soit le dispositif utilisé pour afficher la page.
Centimètres (cm)
L'unité de mesure en centimètres est utilisée pour les dimensions physiques. Un centimètre est égal à 1/2,54 pouces.
p {
font-size: 2cm;
width: 10cm;
height: 15cm;
}
Pouces (in)
L'unité de mesure en pouces est également utilisée pour les dimensions physiques. Un pouce est égal à 2,54 centimètres.
p {
font-size: 1in;
width: 4in;
height: 6in;
}
Points (pt)
Les points sont principalement utilisés pour la taille de la police. Un point équivaut à 1/72e de pouce.
p { font-size: 12pt; }
Pica (pc)
Un pica est égal à 12 points.
p {
font-size: 1.5pc;
}
Unités relatives
Les unités de mesure relatives sont basées sur d'autres éléments de la page, tels que la taille de police du texte parent ou la taille de l'écran du dispositif.
Pixels (px)
Le pixel est l'unité de mesure la plus courante en CSS. Un pixel est égal à un point sur un écran d'ordinateur standard. Les pixels sont considérés comme des unités absolues car leur taille est fixe et ne dépend pas de la taille de l'écran.
p {
font-size: 16px;
width: 300px;
height: 200px;
}
EM
Un EM est égal à la taille de police actuelle du texte parent. Si la taille de police du parent est de 16 pixels, alors 1 EM est égal à 16 pixels.
p {
font-size: 1.2em;
}
REM
REM signifie "Root EM". La différence avec EM est que REM est basé sur la taille de police de l'élément racine (généralement <html>), pas sur l'élément parent. Cela rend REM très pratique pour la création de mises en page réactives, car il permet de définir des tailles de police et de police en fonction de la taille de la fenêtre d'affichage.
html {
font-size: 16px;
}
p {
font-size: 1.5rem;
}
VW et VH
Les unités VW (Viewport Width) et VH (Viewport Height) sont basées sur la taille de la fenêtre d'affichage. 1 VW est égal à 1% de la largeur de la fenêtre d'affichage, tandis que 1 VH est égal à 1% de la hauteur de la fenêtre d'affichage.
p {
font-size: 5vw;
width: 50vw;
height: 50vh;
}
% (pourcentage)
Le pourcentage est une unité relative qui est basée sur une valeur de référence. Par exemple, si vous spécifiez une largeur de 50% pour un élément, cela signifie que sa largeur sera égale à 50% de la largeur de son élément parent.
div {
width: 50%;
}
Conclusion
Les unités de mesure en CSS sont essentielles pour définir les dimensions et les propriétés de style d'un élément. Il est important de comprendre les différentes unités de mesure disponibles en CSS et de savoir quand utiliser les unités absolues et les unités relatives. En utilisant les unités de mesure correctes, vous pouvez créer des mises en page responsives et des designs web efficaces.