Conversor de PX a REM + tabla completa de 1 a 128px | We.Inc
Convierte px a rem y rem a px con cualquier tamaño de fuente raíz. Tabla completa de 1 a 128px con clases de Tailwind, un conversor de bloques CSS y una ayuda para tamaños fluidos con clamp().
Conversor de PX a REM
Para pasar píxeles a rem, divide el valor en píxeles entre el tamaño de fuente raíz. Con el valor predeterminado del navegador, 16px, 24px son 1.5rem y 12px son 0.75rem. Escribe un valor en cualquiera de las dos casillas para convertir en ambos sentidos, cambia el tamaño raíz si tu sitio usa otra base o pega reglas CSS completas.
Tamaños habituales con la raíz predeterminada de 16px
Píxeles
Uso típico
Pies de foto, etiquetas pequeñas
Texto secundario, botones
Texto principal
Texto principal grande, títulos pequeños
Títulos de sección, padding de tarjetas
Títulos de página, espacios entre secciones
Títulos de portada
Un conversor en ambos sentidos con tamaño raíz personalizable, una tabla completa de 1 a 128 píxeles con la clase de Tailwind correspondiente, un conversor de bloques CSS completos y una ayuda que escribe tamaños fluidos con clamp().
Define el tamaño de fuente raíz. Déjalo en 16 salvo que tu hoja de estilos fije otro tamaño en el elemento html.
Escribe en la casilla de píxeles para obtener rem, o en la de rem para obtener píxeles. Ambas se actualizan mientras escribes.
Desplázate por la tabla para encontrar cualquier tamaño de 1 a 128 píxeles. Haz clic en una fila para copiar su valor en rem.
Pega CSS en el conversor de bloques para pasar todos los valores px a rem de una vez. El cero queda como 0 y los bordes de 1px se mantienen en píxeles salvo que desmarques esa opción.
Usa la ayuda de clamp() para obtener un tamaño de fuente que crezca de forma suave entre el ancho de un teléfono y el de un escritorio.
Deja el tamaño de fuente de html en 100% (el valor predeterminado del navegador) en lugar de fijarlo en 62.5%. El truco del 62.5% hace que 1rem equivalga a 10px, pero encoge todos los componentes de terceros que asumen 16px.
Usa rem para los tamaños de fuente y la mayor parte del espaciado, para que todo el diseño se adapte cuando alguien aumenta el tamaño de texto predeterminado de su navegador.
Deja en px los bordes finos y los desplazamientos de box-shadow. Un borde de 1px convertido en 0.0625rem puede verse borroso o desaparecer con algunos niveles de zoom.
Las media queries en em o rem también siguen el ajuste de fuente del usuario. La mayoría de los navegadores toman 1em en una media query como el tamaño predeterminado del navegador, no el de tu regla html.
Preguntas frecuentes
¿Cuántos píxeles es 1rem?
1rem equivale al tamaño de fuente del elemento raíz html. Los navegadores lo fijan por defecto en 16px, así que 1rem son 16px salvo que el sitio o el visitante lo cambien. Si un visitante pone su tamaño de texto predeterminado en 20px, 1rem pasa a ser 20px en cualquier sitio que no haya fijado el tamaño raíz en píxeles.
¿Qué diferencia hay entre rem y em?
rem siempre es relativo al tamaño de fuente raíz de html. em es relativo al tamaño de fuente del propio elemento (o de su padre, cuando se usa en font-size). Los tamaños em anidados se multiplican: una lista de 1.2em dentro de otra de 1.2em termina siendo 1.44 veces la base. rem nunca se acumula, y por eso la mayoría de los sistemas de diseño lo usan.
¿Debo usar px o rem para los tamaños de fuente?
Usa rem. El texto fijado en px ignora el ajuste de tamaño de fuente predeterminado del navegador, que algunas personas aumentan para leer con comodidad. El zoom de página sigue funcionando con px, pero la preferencia de tamaño de fuente no, así que rem es la opción más accesible.
¿Cómo se corresponden las clases de Tailwind con rem?
En la escala de espaciado predeterminada de Tailwind, cada paso es 0.25rem, es decir, 4px con una raíz de 16px. Así, p-4 es 1rem (16px) y gap-6 es 1.5rem (24px). Los tamaños de fuente usan nombres: text-sm es 0.875rem y text-base es 1rem. La tabla de esta página indica la clase de cada tamaño que está en la escala predeterminada.
¿Esta herramienta envía mi CSS a algún sitio?
No. Todas las conversiones se hacen en tu navegador y no se sube nada de lo que escribes o pegas.
Por qué existe rem
Los píxeles en CSS son unidades fijas. Un título de 32px se queda en 32px aunque el visitante haya pedido a su navegador un texto más grande. La unidad rem lo resuelve vinculando los tamaños al tamaño de fuente raíz, que por defecto sigue el ajuste del visitante. Cambia un número y todos los tamaños en rem de la página se ajustan con él.
Por eso rem encaja bien con la tipografía, el padding, los márgenes y el ancho de las columnas de texto. Los píxeles siguen teniendo sentido para lo que no debe escalar con el texto, como un separador de 1px o el tamaño de una imagen con dimensiones fijas en píxeles.
rem y em lado a lado
El ejemplo en vivo de esta página aplica el mismo tamaño 1.25 en tres niveles de anidación, una vez en em y otra en rem. La versión em crece en cada nivel porque cada hijo multiplica el tamaño de su padre. La versión rem se mantiene igual a cualquier profundidad porque siempre toma como referencia la raíz.
em sigue siendo útil cuando algo debe escalar con su propio texto, como el padding dentro de un botón o el espacio tras un icono. Define el tamaño de fuente del botón en rem y su padding en em, y al cambiar el tamaño de fuente se redimensiona todo el botón.
Tamaños fluidos con clamp()
clamp(min, preferred, max) elige el valor preferido, pero nunca baja del mínimo ni supera el máximo. Combinar rem y vw en el valor preferido hace que un título crezca de forma suave con el ancho de la ventana sin dejar de respetar el tamaño de fuente del usuario.
La ayuda calcula la recta entre dos puntos, por ejemplo 32px en un teléfono de 375px de ancho y 56px en un escritorio de 1280px, y la escribe como una expresión de rem más vw. Prueba el resultado con varios anchos, porque pendientes de vw muy grandes pueden hacer que el texto crezca más rápido que su longitud de línea.
Convertir
Tamaño de fuente raíz (px)
Píxeles
(raíz {n}px)
Copiar rem
Copiar px
Raíz {n}px
Convertir un bloque CSS
CSS con px
El mismo CSS en rem
Mantener los valores de 1px en px
Copiar CSS convertido
Tamaño fluido con clamp()
Tamaño mínimo (px)
Tamaño máximo (px)
Desde el ancho (px)
Hasta el ancho (px)
Introduce tamaños mayores que cero y un ancho Hasta mayor que el ancho Desde.
Copiar clamp()
Cambia el tamaño de la ventana para ver crecer esta línea.
em se acumula, rem no
Cada nivel de abajo fija font-size: 1.25 en su unidad, con tres niveles de anidación.
Nivel {n}
Tabla completa de px a rem
Raíz {n}px. Haz clic en una fila para copiar su valor en rem.
Las clases de Tailwind solo se muestran con una raíz de 16px, el tamaño en el que se basa su escala.
Copiado {v}.
px a rem con una raíz de {n}px, de 1 a 128 píxeles, con clases de Tailwind