Guide des unités de mesure CSS pour les débutants
Salut à toi, futur(e) mage CSS ! ? Bienvenue dans notre incroyable voyage à la découverte des unités de mesure CSS. En tant que ton prof de informatique du coin, je suis excité de t'accompagner à travers cet aspect essentiel du design web. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - on va commencer de zéro et construire nos connaissances ensemble !
Unités de longueur : Les fondations des mesures CSS
Commençons par les bases. En CSS, nous utilisons diverses unités pour spécifier la taille des éléments, les marges, le remplissage et bien plus encore. Pense à ces unités comme les règles et les rubans à mesurer du monde numérique. Elles nous aident à créer des sites web qui sont superbes sur tous les appareils, des petits smartphones aux écrans de bureau géants.
Voici un tableau des unités de longueur CSS les plus courantes :
| Unité | Description | Exemple |
|---|---|---|
| px | Pixels | 16px |
| em | Relatif à la taille de la police de l'élément | 1.5em |
| rem | Relatif à la taille de la police de l'élément racine | 2rem |
| % | Pourcentage | 50% |
| vw | Largeur de la fenêtre | 100vw |
| vh | Hauteur de la fenêtre | 50vh |
Maintenant, plongeons plus profondément dans chacune de ces unités et voyons comment elles fonctionnent en action !
Unités de mesure CSS - Unité 'em'
L'unité 'em' est comme un caméléon - elle s'adapte à son environnement. Un 'em' est égal à la taille de la police de l'élément actuel. Cela le rend super utile pour créer des designs scalable.
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* Cela sera 24px */
margin-bottom: 1em; /* Cela sera également 24px */
}Dans cet exemple, la taille de la police de l'élément .child sera de 24px (1.5 * 16px), et sa marge inférieure sera aussi de 24px. C'est comme si l'élément .child disait, "Je veux être 1.5 fois plus grand que mon parent !"
Unités de mesure CSS - Unité 'ch'
L'unité 'ch' est un peu un passionné de typographie. Elle est basée sur la largeur du caractère '0' dans la police actuelle. Cela peut être super pratique pour créer des layouts cohérents, surtout avec les polices à largeur fixe.
.code-snippet {
font-family: 'Courier New', monospace;
width: 40ch; /* Largeur de 40 caractères '0' */
}Cela créera une boîte qui fait exactement 40 caractères de large - parfait pour afficher des extraits de code !
Unités de mesure CSS - Unité 'rem'
L'unité 'rem' est comme le sage de la famille CSS. Elle se réfère toujours à la taille de la police de l'élément racine (généralement la balise <html>), en ignorant la taille de la police des éléments parents.
html {
font-size: 16px;
}
.container {
font-size: 20px;
}
.container p {
font-size: 1.5rem; /* Cela sera 24px, basé sur la taille de la police de l'html */
}Dans ce cas, même si la .container a une taille de police différente, le paragraphe à l'intérieur sera toujours de 24px (1.5 * 16px de la racine).
Unités de mesure CSS - Unités 'lh' et 'rlh'
L'unité 'lh' est basée sur la hauteur de ligne d'un élément, tandis que 'rlh' est basée sur la hauteur de ligne de l'élément racine. Ce sont des unités plus récentes et excellentes pour créer un ryhtme vertical dans vos designs.
.paragraph {
font-size: 16px;
line-height: 1.5;
margin-bottom: 1lh; /* Cela sera égal à la hauteur de ligne */
}Cela crée un espacement cohérent entre les paragraphes basé sur la hauteur de ligne.
Unités de mesure CSS - Unités 'vh' et 'vw'
Maintenant, nous entrons dans les unités de la fenêtre - celles sont mes favorites ! 'vh' signifie hauteur de la fenêtre, et 'vw' largeur de la fenêtre. Elles sont des pourcentages de la taille totale de la fenêtre.
.hero-section {
height: 100vh; /* Hauteur complète de la fenêtre */
width: 100vw; /* Largeur complète de la fenêtre */
}
.half-width {
width: 50vw; /* La moitié de la largeur de la fenêtre */
}Ces unités sont géniales pour créer des designs réactifs qui s'adaptent à toutes les tailles d'écran. J'ai une fois utilisé ces unités pour créer une page d'atterrissage en plein écran qui avait l'air incroyable sur tout, des téléphones aux écrans de télévision géants !
Unités de mesure CSS - Unités 'vmin' et 'vmax'
'vmin' et 'vmax' sont le duo dynamique des unités de la fenêtre. 'vmin' utilise la dimension la plus petite de la fenêtre, tandis que 'vmax' utilise la plus grande.
.square {
width: 50vmin;
height: 50vmin;
}Cela crée un carré parfait qui est toujours 50% de la dimension la plus petite de la fenêtre - excellent pour maintenir les proportions !
Unités de mesure CSS - Unité 'vb'
L'unité 'vb' est basée sur la taille de la fenêtre dans la direction du bloc (généralement la hauteur dans les modes d'écriture horizontaux). Elle est similaire à 'vh' mais s'adapte aux différents modes d'écriture.
.vertical-text {
writing-mode: vertical-rl;
height: 100vb; /* Pleine hauteur en mode d'écriture vertical */
}Cela est particulièrement utile pour créer des layouts qui fonctionnent bien dans les systèmes d'écriture horizontaux et verticaux.
Unités de mesure CSS - Unité 'vi'
L'unité 'vi' est la version inline de 'vb'. Elle est basée sur la taille de la fenêtre dans la direction inline (généralement la largeur dans les modes d'écriture horizontaux).
.horizontal-scroll {
width: 200vi; /* Deux fois la largeur de la fenêtre */
overflow-x: scroll;
}Cela crée un élément de défilement horizontal qui est toujours deux fois la largeur de la fenêtre.
Exemple - Pourcentages
Les pourcentages en CSS sont toujours relatifs à quelque chose. Pour les largeurs, ils sont généralement relatifs à la largeur de l'élément parent.
.parent {
width: 300px;
}
.child {
width: 50%; /* Cela sera 150px */
}Ici, l'élément .child sera toujours la moitié de la largeur de son parent. C'est comme dire à votre élément, "Tu peux avoir la moitié de ce que ton parent a !"
Exemple - Nombres
Parfois, vous verrez des propriétés CSS avec des nombres mais sans unités. Ces nombres sont généralement utilisés pour des propriétés unitless comme line-height ou opacity.
p {
line-height: 1.5; /* 1.5 fois la taille de la police */
opacity: 0.8; /* 80% opaque */
}Dans ce cas, la hauteur de ligne sera 1.5 fois la taille de la police, créant un texte bien espacé, et l'opacité rendra le texte légèrement transparent.
Et voilà, amis ! Nous avons fait le tour des unités de mesure CSS. Souviens-toi, la clé pour maîtriser celles-ci est la pratique. Essaie de mélanger et d'associer ces unités dans tes projets, et tu développeras vite une intuition pour savoir quand utiliser chacune d'elles.
Bonne programmation, et que tes layouts soient toujours parfaits en pixels ! ?✨
Credits: Image by storyset