Cómo usar
- Confirme el
html font-sizede su proyecto en el campo Tamaño base. El valor predeterminado común es 16px. - Escriba un valor de diseño como
24en la entrada PX. - La entrada REM se actualiza instantáneamente a
1.5rem; también puedes escribir2rempara obtener32px. - Utilice la siguiente hoja de referencia para tamaños de fuente comunes, valores de espaciado y referencias de espaciado de Tailwind.
Características principales
- Conversión bidireccional instantánea: escriba PX o REM y obtenga el valor opuesto inmediatamente, sin botón de cálculo.
- Tamaño de fuente base personalizado: comience con 16 px o cambie a 10 px, 14 px o cualquier tamaño de raíz específico del proyecto.
- Hoja de referencia incorporada: los tamaños comunes se actualizan con su tamaño base, incluidos los equivalentes de 12 px, 16 px, 24 px y 32 px.
- Referencia de espaciado de Tailwind: consulta los tokens de espaciado de Tailwind comunes para conocer los valores de píxeles coincidentes.
- Local y rápido: todos los cálculos se ejecutan en la memoria del navegador sin solicitudes de red.
Herramientas relacionadas
Minimiza o embellece CSS localmente, sin cargas. Elimine comentarios/espacios en blanco, vea estadísticas de ahorro de tamaño o desminifique el código para facilitar la lectura. Copie el resultado ahora.
Formateador JSON seguro: formatee, valide y corrija JSON localmente. Embellecer/minimizar, resaltar errores, generar TypeScript o Zod, convertir a XML: privado. Pruébalo ahora.
Probador y evaluador JSONPath gratuito para API JSON. Extraiga nodos coincidentes en tiempo real, inspeccione rutas y copie resultados JSON mientras el análisis permanece local en su navegador.
Convierta objetos o matrices JSON a CSV localmente en su navegador. Aplane los campos, obtenga una vista previa del resultado y luego copie o descargue CSV sin cargar datos.
Convierta texto o archivos CSV a matrices JSON localmente en su navegador. Admite encabezados, delimitadores de coma/punto y coma/tabulación, archivos de arrastrar y soltar, copiar y descargar sin cargas.
Compare dos documentos JSON localmente en su navegador. Ordene las claves de los objetos para obtener una diferencia semántica, ignore el ruido del orden de las claves y marque los campos agregados, eliminados y modificados sin cargarlos.
Minimice JSON en una línea, elimine sangrías y saltos de línea, y compare el tamaño original, el tamaño minimizado, los bytes guardados y el porcentaje guardado.
Convertidor JSON a TypeScript en línea gratuito. Genere instantáneamente interfaces y tipos de TypeScript a partir de sus cargas útiles JSON. Generación de código del lado del cliente 100% privado.
Lógica de cálculo
- Fórmula de PX a REM:
REM = PX / Base Size. - Fórmula REM a PX:
PX = REM × Base Size. - Con el tamaño de raíz predeterminado del navegador,
16px = 1remy24px = 1.5rem.
Preguntas frecuentes
¿Cuántos píxeles tiene 1rem?
En la mayoría de los navegadores, 1rem equivale a 16px de forma predeterminada. Si su proyecto cambia html { font-size }, use ese tamaño de raíz en su lugar.
¿Cuál es la diferencia entre PX y REM?
PX es una unidad de píxeles absoluta. REM es relativo al tamaño de fuente raíz, lo que ayuda a que los diseños respeten las preferencias de tamaño de fuente del usuario.
¿Por qué algunos proyectos utilizan una base de 10px?
Algunos equipos configuran html { font-size: 62.5%; } de modo que 1rem sea aproximadamente 10 px para facilitar el cálculo mental. Considere la accesibilidad antes de adoptarla.
¿Esto también convierte EM?
No. Esta herramienta se centra en PX y REM. EM depende del tamaño de fuente del elemento actual, por lo que no debe tratarse como la misma conversión.
¿Se ha subido algún CSS o datos de diseño?
No. La conversión ocurre localmente en su navegador sin cálculo del servidor ni carga de archivos.