Convertisseur d'unités CSS

Un convertisseur d'unité CSS traduit une longueur entre les unités utilisées par CSS pour le type de dimensionnement et la disposition : px, rem, em, pt et %. Il existe parce que la conception réactive moderne s'appuie sur les unités relatives - échelle rem et em avec les paramètres de taille de police et le zoom de l'utilisateur - tandis que les maquettes de conception et les anciennes feuilles de style sont généralement exprimées en pixels fixes. Cet outil prend une valeur comme 24 px et l'affiche comme 1,5 rem, 1,5 em, 18 pt et 150 % à la fois, et fonctionne dans toutes les directions à partir d'un seul champ.

Les conversions dépendent toutes d'un seul nombre : la taille de la police racine (base), qui est par défaut 16 px car c'est la valeur par défaut du navigateur pour l'élément html Un rem est toujours égal à cette taille de police de base, donc à 16 px la valeur 16 px est 1rem, 24 px est 1,5 rem, et 8 px est 0,5 rem. Les points sont liés au pixel de référence CSS - 1 pouce est 96 px et 72 pt - donc 1 pt est égal à 96/72, environ 1,333 px. Pourcentage est traité comme une part de la taille de base % est égale % et est égal à %.

Chaque conversion prend deux étapes L'outil transforme d'abord votre entrée en pixels en la multipliant par le nombre de pixels dans une unité d'entrée, puis divise cette valeur de pixel par le nombre de pixels dans une unité cible À une base de 18 px, 27 px devient 27 18 = 1,5 rem, et à toute base 12 pt devient 12. 96 96 200 72 = 16 px. Les résultats sont arrondis à au plus quatre décimales, donc 15 px à une base de 16 px lit 0,9375 remp. Les unités de visualisation telles que vw et vh dépendent de la taille du convertisseur de la taille de la taille de la fenêtre ne dépendent pas de la taille de la police.

Tout s'exécute dans votre navigateur au fur et à mesure que vous tapez, il n'y a donc pas de téléchargement et pas d'attente sur un serveur Modifiez la taille de la police de base pour modéliser un composant qui définit sa propre taille de police, lisez les résultats dans chaque unité et copiez celle dont vous avez besoin. La table intégrée px-to-rem vous donne une référence prête pour les tailles qui apparaissent le plus dans une échelle de types.