| 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 convertidor de unidad CSS traduce una longitud entre las unidades que CSS utiliza para el tipo y el diseño de dimensionamiento: PX, REM, EM, PT y %. Existe porque el diseño receptivo moderno se apoya en las unidades relativas (REM y EM escalan con la configuración y el zoom de fuente del usuario), mientras que las maquetas de diseño y las hojas de estilo más antiguas generalmente se expresan en píxeles fijos. Esta herramienta toma un valor como 24px y lo muestra como 1.5rem, 1.5em, 18pt y 150% a la vez, y funciona en todas las direcciones desde un solo campo.
Todas las conversiones dependen de un número: el tamaño de fuente raíz (base), que tiene como valor predeterminado 16px porque es el navegador predeterminado para el elemento HTML. Un REM siempre es igual a ese tamaño de fuente base, por lo que a 16px el valor 16px es 1REM, 24px es 1.5rem y 8px es 0.5rem. Los puntos están vinculados al píxel de referencia CSS: 1 pulgada es 96 px y 72pt, por lo que 1pt equivale a 96/72, aproximadamente 1.333 px. El porcentaje se trata como una parte del tamaño de fuente base, por lo que 100% es igual a la base y 50% equivale a la mitad.
Todo se ejecuta en su navegador mientras escribe, por lo que no hay carga, no hay espera en un servidor y no hay límite en la cantidad de valores que convierte. Cambie el tamaño de fuente base para modelar un componente que establezca su propio tamaño de fuente, lea los resultados en cada unidad y copie el que necesita. La tabla PX-to-REM incorporada le ofrece una referencia lista para los tamaños que más se presentan en una escala de tipo.
Escriba el número que desea convertir y elija la unidad en la que se encuentra actualmente: PX, REM, EM, PT o %. También puede pegar un valor con su unidad, como 24px, y la herramienta leerá la unidad por usted.
Ajuste el tamaño de fuente raíz si su proyecto utiliza algo que no sea el predeterminado del navegador de 16 px. Esto controla cómo REM, EM y % se relacionan con los píxeles.
El convertidor muestra el valor equivalente en todas las unidades compatibles al instante, cada una con su sufijo de unidad para que puedas colocarlo directamente en CSS.
Copie cualquier resultado con un solo clic o escanee la tabla de referencia de PX-to-REM para los tamaños comunes en una escala tipográfica.
Introduzca un valor y vea instantáneamente PX, REM, EM, PT y % uno al lado del otro, cada uno formateado con su unidad para que pueda pegarlo directamente en una hoja de estilo.
El tamaño de fuente raíz es ajustable, por lo que las conversiones de REM, EM y % coinciden con su proyecto, ya sea que utilice el truco predeterminado de 16 px, un truco de "62.5%" o un tamaño de fuente a nivel de componente.
No hay "desde" y "hacia". Convierta px a REM, REM a PX, PX a EM o PT a PX — cualquier unidad a cualquier unidad — desde una sola entrada.
Una tabla integrada enumera los equivalentes REM, EM, PT y % para los tamaños de píxeles que más aparecen en las escalas de tipo, por lo que puede observar una escala completa en su base elegida.
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!