| Unité | Comparez toutes les unités CSS, y compris px, em, rem, vw, vh, fr et plus. Inclut des exemples, le support des navigateurs et quand utiliser chaque unité. | |
|---|---|---|
pxAbsolute | Pixels — 1/96th of 1 inch on screen | |
ptAbsolute | Points — 1/72nd of 1 inch (print) | |
pcAbsolute | Picas — 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| Unité | Comparez toutes les unités CSS, y compris px, em, rem, vw, vh, fr et plus. Inclut des exemples, le support des navigateurs et quand utiliser chaque unité. | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of '水' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| Unité | Comparez toutes les unités CSS, y compris px, em, rem, vw, vh, fr et plus. Inclut des exemples, le support des navigateurs et quand utiliser chaque unité. | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| Unité | Comparez toutes les unités CSS, y compris px, em, rem, vw, vh, fr et plus. Inclut des exemples, le support des navigateurs et quand utiliser chaque unité. | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| Unité | Comparez toutes les unités CSS, y compris px, em, rem, vw, vh, fr et plus. Inclut des exemples, le support des navigateurs et quand utiliser chaque unité. | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
S'adapte à la taille de police :root, respecte les paramètres du navigateur de l'utilisateur, cohérent entre les composants
Évitez px — ne respecte pas les préférences de police de l'utilisateur
rem pour un espacement global cohérent ; em pour un espacement relatif à la taille de police du composant
Évitez px pour les composants qui se mettent à l'échelle
% pour les conteneurs fluides ; ch (45–75ch) pour la longueur de ligne de prose optimale
Évitez les px fixes pour la largeur du contenu principal
dvh évite le chevauchement du chrome du navigateur mobile ; vh est correct pour bureau uniquement
Évitez 100vh seul sur mobile — la barre URL coupe le contenu
Distribue l'espace restant proportionnellement ; plus propre que % dans grid
Évitez de combiner fr avec des colonnes px fixes naïvement
Rendu précis au pixel ; pas besoin de s'adapter au texte
Pas besoin d'unités relatives ici
Utilisez rem pour les tailles de police. rem est relatif à la taille de police de l'élément racine (généralement 16px), ce qui facilite la mise à l'échelle de toute l'interface en changeant la taille de police racine. Cela respecte également les préférences de taille de police du navigateur de l'utilisateur, améliorant l'accessibilité. Utilisez px uniquement pour les bordures, les ombres et les éléments qui ne doivent pas être mis à l'échelle.
em est relatif à la taille de police de l'élément parent, ce qui peut se composer dans les éléments imbriqués. rem est relatif à la taille de police de l'élément racine ('<'html>), le rendant plus prévisible. Pour les tailles de police, rem est généralement préféré. em est utile pour les marges internes et externes qui doivent s'adapter à la taille de police propre du composant.
Utilisez vw/vh pour les éléments qui doivent être dimensionnés par rapport au viewport du navigateur (par exemple, les sections héros plein écran, les modales). Utilisez les pourcentages pour les éléments qui doivent être dimensionnés par rapport à leur conteneur parent. dvh (dynamic viewport height) est préféré à vh sur mobile où la barre d'adresse affecte la hauteur.
Les unités de requête de conteneur (cqw, cqh, cqi, cqb) sont relatives à la taille d'un élément conteneur plutôt qu'au viewport. Elles nécessitent un contexte de conteneur (container-type: inline-size). Elles sont idéales pour des composants vraiment responsifs qui doivent s'adapter à la taille de leur conteneur quelle que soit la taille du viewport.