Unités CSS

Apprenez à travailler avec des unités en CSS

L'une des choses que vous utiliserez chaque jour en CSS estunités. Ils sont utilisés pour définir les longueurs, les rembourrages, les marges, aligner les éléments, etc.

Des choses commepx,em,rem, ou pourcentages.

Ils sont partout. Il y en a aussi des inconnus.

Pixels

L'unité de mesure la plus utilisée. Un pixel ne correspond pas réellement à un pixel physique sur votre écran, car cela varie beaucoup selon l'appareil (pensez aux appareils à haute résolution par rapport aux appareils sans rétine).

Il existe une convention qui fait que cette unité fonctionne de manière cohérente sur tous les appareils.

Les pourcentages

Autre mesure très utile, les pourcentages vous permettent de spécifier des valeurs en pourcentages de la propriété correspondante de cet élément parent.

Exemple:

.parent {
  width: 400px;
}
.child {
width: 50%; /* = 200px */
}

Unités de mesure du monde réel

Nous avons ces unités de mesure qui sont traduites du monde extérieur. Généralement inutiles à l'écran, ils peuvent être utiles pour imprimer des feuilles de style. Elles sont:

cmun centimètre (correspond à 37,8 pixels)
mmun millimètre (0,1 cm)
qun quart de millimètre
inun pouce (correspond à 96 pixels)
ptun point (1 pouce = 72 points)
pcun pica (1 pica = 12 points)

Unités relatives

emest la valeur attribuée à cet élémentfont-size, donc sa valeur exacte change entre les éléments. Cela ne change pas en fonction de la police utilisée, juste de la taille de la police. En typographie, cela mesure la largeur dumlettre.
remest similaire àem, mais au lieu de varier selon la taille de police actuelle de l'élément, il utilise l'élément racine (html) taille de police. Vous définissez cette taille de police une fois, etremsera une mesure cohérente sur toute la page.
exest commeem, mais inséré de mesurer la largeur dem, il mesure la hauteur duxlettre. Il peut changer en fonction de la police utilisée et de la taille de la police.
chest commeexmais au lieu de mesurer la hauteur dexil mesure la largeur de0(zéro).

Unités de fenêtre

vwleunité de largeur de la fenêtrereprésente un pourcentage de la largeur de la fenêtre.50vwsignifie 50% de la largeur de la fenêtre.
vhleunité de hauteur de la fenêtrereprésente un pourcentage de la hauteur de la fenêtre.50vhsignifie 50% de la hauteur de la fenêtre.
vminleunité minimale de la fenêtrereprésente le minimum entre la hauteur ou la largeur en termes de pourcentage.30vmincorrespond aux 30% de la largeur ou de la hauteur actuelle, selon celle qui est la plus petite
vmaxleunité maximale de la fenêtrereprésente le maximum entre la hauteur ou la largeur en termes de pourcentage.30vmaxcorrespond aux 30% de la largeur ou de la hauteur actuelle, selon celle qui est la plus grande

Unités de fraction

frsont des unités de fraction, et elles sont utilisées dansGrille CSSpour diviser l'espace en fractions.

Téléchargez mon gratuitManuel CSS