In questo articolo
Cosa sono le unità CSS?
Les unités CSS définissent la taille des éléments sur une page web. Elles se divisent en deux catégories : les unités absolues (px, cm, mm, in, pt, pc) qui ont des tailles physiques fixes, et les unités relatives (rem, em, vw, vh, vmin, vmax, %) qui s'adaptent en fonction du contexte comme la taille de police ou les dimensions de la fenêtre.
Le design responsive moderne s'appuie fortement sur les unités relatives. L'unité rem s'adapte à la taille de police racine (généralement 16px), em s'adapte à la taille de police de l'élément parent, et les unités de viewport (vw, vh) s'adaptent à la fenêtre du navigateur, rendant les mises en page fluides sur tous les appareils.
Come funziona la conversione di unità CSS
Convertir entre les unités CSS nécessite de connaître le contexte de base : la taille de police racine pour rem, la taille de police parente pour em, et les dimensions du viewport pour vw/vh. La plupart des conversions utilisent de simples multiplications ou divisions.
- px vers rem — diviser la valeur en pixels par la taille de police racine (16px par défaut), donc 24px = 1.5rem quand la racine est 16px
- rem vers em — rem et em sont égaux quand l'élément hérite de la taille de police racine ; sinon multiplier par le ratio de la taille de police parent/racine
- px vers vw/vh — diviser la valeur en pixels par la largeur du viewport (ou hauteur) et multiplier par 100, donc 192px = 10vw sur un viewport de 1920px
Prova gratuitamente — nessuna registrazione richiesta
Converti unità CSS →Quando usare la conversione di unità CSS
La conversion entre unités CSS est une tâche quotidienne dans le développement front-end moderne.
- Design responsive — convertir les maquettes en pixels fixes en mises en page basées sur rem ou vw qui s'adaptent élégamment du mobile au bureau
- Accessibilité — utiliser des unités rem garantit que le texte s'adapte correctement quand les utilisateurs ajustent la taille de police par défaut du navigateur
- Tokens de design system — convertir les spécifications des designers (généralement en pixels) en tokens basés sur rem qui maintiennent des ratios cohérents d'espacement et de typographie
Domande frequenti
Dois-je utiliser rem ou em pour les tailles de police ?
Utilisez rem dans la plupart des cas. Les unités rem sont relatives à la taille de police racine, les rendant prévisibles quelle que soit la profondeur d'imbrication. Les unités em se cumulent lorsqu'elles sont imbriquées (un 1.2em à l'intérieur d'un autre 1.2em devient 1.44x). Réservez em pour des composants spécifiques où l'échelle relative au parent est intentionnelle.
Quelle est la taille de police racine par défaut des navigateurs ?
Tous les navigateurs majeurs utilisent 16px comme taille de police racine par défaut. Cela signifie que 1rem = 16px sauf si c'est surchargé par CSS. Les utilisateurs peuvent modifier cela dans les paramètres du navigateur pour l'accessibilité, c'est pourquoi utiliser rem au lieu de px est important pour un design accessible.
Quand utiliser les unités viewport au lieu de rem ?
Utilisez les unités viewport (vw, vh) pour les éléments qui doivent s'adapter à la fenêtre du navigateur plutôt qu'à la taille de police. Les exemples courants incluent les sections hero plein écran (height: 100vh), la typographie fluide (clamp avec vw) et le padding responsive sur les conteneurs. Évitez vw pour le texte du corps — cela ignore les préférences de police de l'utilisateur.