| px | rem | em | pt | % |
|---|---|---|---|---|
| 1 | 0.0625 | 0.0625 | 0.75 | 6.25 |
| 2 | 0.125 | 0.125 | 1.5 | 12.5 |
| 4 | 0.25 | 0.25 | 3 | 25 |
| 8 | 0.5 | 0.5 | 6 | 50 |
| 10 | 0.625 | 0.625 | 7.5 | 62.5 |
| 12 | 0.75 | 0.75 | 9 | 75 |
| 14 | 0.875 | 0.875 | 10.5 | 87.5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112.5 |
| 20 | 1.25 | 1.25 | 15 | 125 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 28 | 1.75 | 1.75 | 21 | 175 |
| 32 | 2 | 2 | 24 | 200 |
| 36 | 2.25 | 2.25 | 27 | 225 |
| 40 | 2.5 | 2.5 | 30 | 250 |
| 48 | 3 | 3 | 36 | 300 |
| 56 | 3.5 | 3.5 | 42 | 350 |
| 64 | 4 | 4 | 48 | 400 |
Un convertisseur d'unités 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 des 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 le montre 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 numéro : 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 1 rem, 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 pts, donc 1 pt est égal à 96/72, soit environ 1 333 px. Le pourcentage est traité comme une part de la taille de la police de base, donc 100 % est égal à la base et 50 % en est la moitié.
Tout s'exécute dans votre navigateur au fur et à mesure de votre saisie, il n'y a donc pas de téléchargement, pas d'attente sur un serveur et aucune limite sur le nombre de valeurs que vous convertissez. Modifiez la taille de 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 celui dont vous avez besoin. La table PX-TO-REM intégrée vous donne une référence prête pour les tailles les plus importantes dans une échelle de type.
Tapez le numéro que vous souhaitez convertir et choisissez l'unité dans laquelle il se trouve actuellement : px, rem, EM, PT ou %. Vous pouvez également coller une valeur avec son unité, comme 24 pixels, et l'outil lira l'unité pour vous.
Ajustez la taille de la police racine si votre projet utilise autre chose que la valeur par défaut du navigateur 16px. Cela contrôle la façon dont REM, EM et % sont liés aux pixels.
Le convertisseur affiche instantanément la valeur équivalente de toutes les unités prises en charge, chacune avec son suffixe d'unité afin que vous puissiez la déposer directement dans CSS.
Copiez tout résultat en un clic ou scannez la table de référence PX-TO-REM pour les tailles courantes dans une échelle typographique.
Entrez une valeur et voyez instantanément PX, REM, EM, PT et % côte à côte, chacun formaté avec son unité afin de pouvoir la coller directement dans une feuille de style.
La taille de la police racine est réglable, donc les conversions REM, EM et % correspondent à votre projet, que vous utilisiez la valeur par défaut 16 px, une astuce de 10 px "62,5 %" ou une taille de police au niveau du composant.
Il n'y a pas de "de" et de "à" fixes. Convertissez PX en REM, REM en PX, PX en EM ou PT en PX - n'importe quelle unité en une unité - à partir d'une seule entrée.
Un tableau intégré répertorie les équivalents REM, EM, PT et % pour les tailles de pixels les plus importantes dans les échelles de type, afin que vous puissiez regarder une échelle entière à la base de votre choix.
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Convert length, weight, temperature, area, volume, speed, time, data, pressure, energy, and angle units instantly with exact conversion factors
0 comments
No comments yet. Be the first to share your thoughts!