¿Cuál es la diferencia entre rem y em?

rem es relativo al tamaño de fuente raíz, mientras que em es relativo al tamaño de fuente del elemento padre. Puedes configurar ambos tamaños aquí.

¿Por qué el valor predeterminado es 16px?

16px es el tamaño de fuente raíz predeterminado en la mayoría de los navegadores, por lo que 1rem equivale a 16px salvo que se cambie.

¿Cómo se convierte pt?

Usando la relación CSS de 96/72, por lo que 1pt equivale a aproximadamente 1,333px y 12pt equivale a 16px.

¿Contra qué se convierte el porcentaje?

El porcentaje es relativo al tamaño de fuente base (padre), como em — 100% equivale al tamaño base.

¿Se suben mis datos?

No. Todo se convierte en tu navegador y nada sale de tu dispositivo.

Conversor de unidades CSS (px / rem / em)

Valor

Unidad de origen

Tamaño de fuente raíz (px)

Tamaño de fuente base / padre (px)

Equivalencias

px16px

rem1rem

em1em

pt12pt

%100%

Sitios externos relacionados

Algunos enlaces son enlaces de afiliados.

JetBrainsUna empresa de herramientas para desarrolladores detrás de populares IDEs como IntelliJ IDEA, WebStorm, PyCharm y Rider. Conocida por la inteligencia de código profunda, soporte de refactorización y herramientas de depuración integradas. Ofrece una suscripción All Products Pack.AmazonEl mayor mercado en línea del mundo para compras, electrónica, libros, software y más. El envío rápido, las devoluciones sencillas y el vasto catálogo de productos lo convierten en el favorito para las compras diarias. La membresía Prime añade streaming, envío gratuito y ofertas exclusivas.

Herramientas relacionadas

Conversor de Formatos de ColorConvierte un color a HEX, RGB, HSL, HSV y CMYK, y copia código listo para CSS, SwiftUI, Android y Flutter, en tu navegador.Base64 Codificar / DecodificarCodifica texto a Base64 o decodifica Base64 al instante — tildes y emojis sin errores (UTF-8), Base64 seguro para URL, imagen a data URL. Todo en el navegador.Playground de FlexboxAlterna flex-direction, justify-content, align-items, wrap y gap con vista previa en vivo y copia el CSS. Una forma rápida de aprender y crear diseños flex. En tu navegador.Generador de CSS clamp()Convierte un tamaño mínimo y máximo y un rango de viewport en un valor CSS clamp() fluido para tipografía y espaciado responsivos, con vista previa. En tu navegador.

Convierte una longitud CSS entre px, rem, em, pt y porcentaje. Como rem depende del tamaño de fuente raíz y em y % dependen del tamaño de fuente padre (base), puedes configurar ambos — el valor predeterminado es 16px, el estándar del navegador. Introduce un valor, elige su unidad y ve todos los equivalentes a la vez. Todo funciona en tu navegador.

Cómo usarlo

Introduce un valor y elige su unidad.
Establece el tamaño de fuente raíz y el tamaño base para em/%.
Lee o copia el equivalente en cada unidad.

Cómo funciona

Todos los valores se convierten primero a píxeles: rem multiplica por el tamaño de fuente raíz, em multiplica por el tamaño de fuente base (padre), pt usa la relación CSS de 96/72 y el porcentaje es el tamaño base multiplicado por el valor dividido entre 100. Desde píxeles, la herramienta convierte de vuelta a cada unidad. Por eso 1.5rem con una raíz de 16px equivale a 24px, y 12pt equivale a 16px.

Características

Todas las unidades a la vez

Ve px, rem, em, pt y % juntos para un mismo valor.

Raíz y base personalizadas

Configura los tamaños de fuente raíz y padre de los que dependen rem, em y %.

Copia cualquier unidad

Obtén el valor exacto que necesitas para tu CSS.

Privado e instantáneo

Todo se convierte en tu navegador; no se sube nada.

Cuándo usarlo

Diseño responsivo

Convierte maquetas en píxeles a unidades rem escalables.

Accesibilidad

Usa rem para que el texto respete el tamaño de fuente del usuario.

Componentes

Calcula valores em relativos al tamaño de fuente de un componente.

Estilos de impresión

Convierte entre pt y px para CSS de impresión.

Notas

rem es relativo al tamaño de fuente raíz (html).
em y el porcentaje son relativos al tamaño de fuente padre (base).
pt usa la relación estándar 96/72 (1pt = 1,333px).
Todos los cálculos se ejecutan en tu dispositivo; no se sube nada.

Preguntas frecuentes

¿Cuál es la diferencia entre rem y em?: rem es relativo al tamaño de fuente raíz, mientras que em es relativo al tamaño de fuente del elemento padre. Puedes configurar ambos tamaños aquí.
¿Por qué el valor predeterminado es 16px?: 16px es el tamaño de fuente raíz predeterminado en la mayoría de los navegadores, por lo que 1rem equivale a 16px salvo que se cambie.
¿Cómo se convierte pt?: Usando la relación CSS de 96/72, por lo que 1pt equivale a aproximadamente 1,333px y 12pt equivale a 16px.
¿Contra qué se convierte el porcentaje?: El porcentaje es relativo al tamaño de fuente base (padre), como em — 100% equivale al tamaño base.
¿Se suben mis datos?: No. Todo se convierte en tu navegador y nada sale de tu dispositivo.