Convierte píxeles a rem y rem a píxeles con el tamaño de fuente raíz que use tu proyecto, calcula em para elementos anidados y convierte todos los valores px de una hoja de estilos de una sola vez, sin tocar bordes, media queries ni comentarios.
24px equivale a 1.5rem con una raíz de 16px, y a 1.5em en un padre de 16px.
Todas las conversiones de la página dividen o multiplican por este valor.
Elige 10 para el truco del 62.5%, en el que 1rem = 10px.
html { font-size: 100%; }100% es el valor predeterminado del navegador, así que una raíz de 16px no necesita ninguna regla.
Se lee de esta página cuando termina de cargarse. El sitio no toca el tamaño de fuente de html, así que muestra el ajuste de tu navegador.
Los ceros finales se eliminan, así que 1.5000 se escribe 1.5.
Escribe en cualquiera de los campos y el otro se actualiza. rem se mide respecto al tamaño de fuente raíz.
Exacto con 4 decimales, sin los ceros finales.
24px ÷ 16px (raíz) = 1.5rem
Cada font-size en em multiplica el del nivel superior. Enumera los tamaños de fuente desde la raíz hacia abajo y mira el tamaño final de cada nivel, junto al rem que no se acumularía.
16px × 1.25 × 0.875 = 17.5px. Escrito en rem, equivale a 1.0938rem, un valor que mantiene el mismo tamaño aunque cambie el tamaño de fuente de un ancestro.
Selecciona una fila para copiar su valor rem. La columna Tailwind indica el paso de espaciado que da el mismo valor rem.
La escala de espaciado de Tailwind avanza de 0.25rem en 0.25rem, así que el paso 4 (p-4, m-4, gap-4) es 1rem: 16px con la raíz predeterminada. Solo se listan los pasos enteros y medios; cualquier valor más fino necesita un valor arbitrario como p-[0.9375rem]. La escala predeterminada de Tailwind v3 también omite algunos pasos (no existe el 13), así que comprueba la tuya. La fila de 1px muestra px porque las utilidades *-px de Tailwind miden exactamente 1px con cualquier raíz.
Pega CSS y cada valor px pasa a rem con la raíz de 16px, redondeado a 4 decimales. Cada cambio se resalta y se lista por línea.
/* Card component, sized in px. Notes such as 24px stay put. */
:root {
--radius: 0.75rem;
--gutter: 1.25rem;
}
.card {
padding: 1.5rem 2rem;
margin: 0 auto -0.5rem;
border: 1px solid #e3e6ea;
border-radius: var(--radius);
font: 0.9375rem/1.6 system-ui, sans-serif;
box-shadow: 0 0.0313rem 0.125rem rgb(0 0 0 / 0.08);
background: #fff url("img/grain-64px.png");
}
.card__title {
font-size: 1.375rem;
letter-spacing: -0.0313rem;
margin-bottom: 0.75rem;
}
.spec-label::after {
content: "16px";
}
@media (min-width: 768px) {
.card {
padding: 2rem 3rem;
}
}
Es una transformación de texto cuidadosa, no un analizador de CSS completo, así que revisa el resultado antes de publicarlo. No puede ver dónde se usa un valor: un punto de corte guardado en una variable o pasado a un mixin se convierte donde está escrito, igual que un desplazamiento en píxeles dentro de un sprite dimensionado en píxeles. Los valores dentro de un atributo style de HTML van entre comillas y no se tocan.
Convierte los colores de la misma hoja de estilos entre HEX, RGB y HSL, y de paso comprueba el contraste del texto.
Calcula el ancho y el alto de la caja de una imagen o un video con una proporción fija antes de darle tamaño en rem.
Para longitudes físicas en lugar de CSS: los milímetros y las pulgadas de una ficha técnica de impresión o de producto.
Un rem equivale a un tamaño de fuente raíz: el tamaño de fuente del elemento html, que es 16px en todos los navegadores principales hasta que un sitio o un visitante lo cambia. Convertir es una división, px ÷ raíz = rem, y una multiplicación de vuelta, rem × raíz = px. em funciona igual, pero con otro número: el tamaño de fuente del padre para el propio font-size, y el tamaño de fuente del propio elemento para todo lo demás. La aritmética es sencilla; lo que aporta esta página es mantener en orden la raíz, el redondeo y los casos límite.
Déjalo en 16px, el valor predeterminado de todos los navegadores principales, o elige la raíz que tu proyecto define en html. Elige 10px para la configuración del 62.5%, en la que 1rem son 10px. Los ajustes también muestran el porcentaje que debes escribir en CSS, para que el ajuste de tamaño de fuente del propio visitante siga contando.
Escribe píxeles y lee rem, o escribe rem y lee píxeles; los dos campos están vinculados. Cambia el segundo campo a em e indica un tamaño padre para convertir elementos anidados. Elige de 2 a 6 decimales; los ceros finales se eliminan.
Pega CSS en el conversor por lotes y cada valor px pasa a rem, o al revés. Los bordes de 1px, las media queries, los comentarios, las cadenas y los valores url() no se tocan, cada cambio aparece listado por línea y el resultado se copia o se descarga como archivo .css.
Escribe en cualquiera de los campos y el otro se actualiza con cada pulsación. Cambia la raíz y el resultado se recalcula sin perder lo que escribiste, y si pegas 24px o 1.5rem con su unidad, el valor va al campo correcto.
Convierte respecto a cualquier tamaño padre, crea después una cadena de tamaños de fuente em anidados y mira cómo 0.875em dentro de 1.25em se resuelve en un tamaño exacto en píxeles, junto al valor rem que no se habría acumulado.
Tamaños habituales de 1px a 96px con la raíz actual, cada uno con su valor rem y el paso de espaciado de Tailwind correspondiente. Selecciona una fila y su valor rem queda en tu portapapeles.
El conversor por lotes omite comentarios, cadenas entre comillas, valores url() y nombres de clase escapados, gestiona -0.5px y .5px, y mantiene en píxeles las líneas finas de 1px si se lo pides. Cada cambio se resalta en el resultado y se lista por línea.
En una media query, rem se mide respecto al tamaño de fuente inicial del navegador, no a la raíz de tu html. Por defecto, los puntos de corte no se tocan, y cuando decides convertirlos se dividen entre 16, sea cual sea la raíz configurada.
Cuando un valor no se divide de forma exacta, la página indica que se ha redondeado y lo muestra al lado con diez decimales, y solo lo llama exacto cuando no se recorta nada. Las filas redondeadas de la tabla de referencia se marcan, y el conversor por lotes cuenta cada valor redondeado.
Divide el valor en píxeles entre el tamaño de fuente raíz: rem = px ÷ raíz. Con la raíz predeterminada del navegador, de 16px, 24px ÷ 16 = 1.5rem, 14px ÷ 16 = 0.875rem y 12px ÷ 16 = 0.75rem. Si tu hoja de estilos define otra raíz, divide entre ella: con una raíz de 10px, 24px son 2.4rem. La raíz es el tamaño de fuente del elemento html, no el de body ni el del elemento al que estás dando estilo.
1rem equivale al tamaño de fuente raíz, que es 16px de serie en todos los navegadores principales. Aun así, no es un número fijo. Si una hoja de estilos define html { font-size: 62.5% }, 1rem pasa a ser 10px, y si un visitante sube a 20px el tamaño de fuente predeterminado en los ajustes de su navegador, 1rem pasa a ser 20px para él en todos los sitios que no tocan la raíz. Esa variabilidad es precisamente la razón de ser de la unidad.
Multiplica por el tamaño de fuente raíz: px = rem × raíz. Con la raíz predeterminada de 16px, 1.5rem × 16 = 24px, 0.875rem × 16 = 14px y 2.25rem × 16 = 36px. Cuando compares una implementación con un archivo de diseño, recuerda que el resultado es el tamaño para un visitante con la configuración predeterminada; quien haya elegido un tamaño predeterminado mayor ve todos los valores rem ampliados en proporción.
rem siempre se mide respecto al tamaño de fuente raíz (html), así que 1.5rem significa lo mismo en cualquier parte de la página. em se mide respecto a un tamaño de fuente local: para la propiedad font-size es el tamaño de fuente del padre, y para padding, margin, width y otras longitudes es el tamaño de fuente calculado del propio elemento. Por eso em se acumula al anidarse. Una lista a 0.875em dentro de otra lista a 0.875em queda en 0.875 × 0.875 = 0.766 del tamaño exterior, 12.25px partiendo de 16px. rem nunca se acumula, y por eso es la opción habitual para los tamaños de fuente, mientras que em sigue siendo útil para espaciados que deben escalar con el texto que rodean, como el padding de un botón.
Porque rem respeta el tamaño de fuente predeterminado del visitante. La mayoría de los navegadores de escritorio permiten subir ese valor, y muchas personas con baja visión lo hacen; el ajuste cambia la raíz, así que todo lo dimensionado en rem o em crece con él. Un tamaño de fuente escrito en px ignora el ajuste por completo. El zoom de la página amplía px y rem por igual, así que el zoom no marca la diferencia; la marca la preferencia de tamaño de fuente, que es el ajuste que la gente elige cuando quiere un texto más grande sin que todo lo demás crezca también.
El 62.5% de los 16px predeterminados es 10px, así que hace que 1rem sea 10px y convierte la aritmética en un simple desplazamiento del punto decimal: 24px son 2.4rem y 14px son 1.4rem. Como es un porcentaje, sigue respetando un tamaño predeterminado mayor del visitante (un valor predeterminado de 20px da una raíz de 12.5px). Los inconvenientes: el texto cae a 10px allí donde olvides definir un tamaño, así que necesitas body { font-size: 1.6rem }; los componentes de terceros que dan por hecha una raíz de 16px se muestran al 62.5% de su tamaño previsto; la escala de espaciado de Tailwind se reduce con ella, de modo que p-4 pasa a ser 10px; y las media queries la ignoran por completo. Nunca definas la raíz en px en su lugar (html { font-size: 10px }), porque eso anula el ajuste del visitante.
Normalmente no. Un borde de 1px es una línea fina que debe seguir siéndolo. Escrito como 0.0625rem, crece con la raíz hasta anchos fraccionarios, como 1.25px con una raíz de 20px, y los navegadores suelen ajustar el ancho de los bordes a píxeles enteros del dispositivo, así que las líneas pueden salir desiguales de un elemento a otro. Los bordes decorativos gruesos y los contornos que deben escalar con el texto están bien en rem o em. Por eso el conversor por lotes puede mantener los valores de 1px en píxeles mientras convierte todo lo demás.
Funciona, pero no significa lo mismo que en otros sitios. Dentro de una media query, rem y em se miden respecto al tamaño de fuente inicial del navegador, que es el predeterminado del visitante (16px salvo que lo haya cambiado), y nunca respecto al tamaño de fuente que defines en html. Así, con html { font-size: 62.5% }, @media (min-width: 48rem) sigue activándose a 768px con la configuración predeterminada, no a 480px. Los puntos de corte escritos en rem o em se desplazan a viewports más anchos cuando un visitante sube su tamaño de fuente predeterminado, de modo que el texto grande recibe el diseño estrecho, más holgado, en lugar de quedar apretado en columnas. Esta página deja las media queries sin tocar por defecto, y cuando decides convertirlas divide entre 16, sea cual sea la raíz que hayas definido.
Porque la mayoría de los tamaños en píxeles no son fracciones redondas de la raíz. 15px son 0.9375rem y 13px son 0.8125rem con una raíz de 16px, ambos exactos; 10px con una raíz de 18px son 0.5555 periódico. Cuatro decimales mantienen cualquier valor con raíz de 16px a menos de 0.0008px del original, muy por debajo de lo que una pantalla puede mostrar, mientras que dos decimales pueden desviarse hasta 0.08px. Los ceros finales se recortan, así que 1.5000 se escribe 1.5.
En gran medida, siempre que revises el resultado. El conversor por lotes es una transformación de texto cuidadosa, no un analizador de CSS completo: omite comentarios, cadenas entre comillas, valores url(), nombres de clase escapados y condiciones de media queries, y convierte cualquier otro valor px que encuentre. No puede ver dónde se usa un valor, así que un punto de corte guardado en una variable de Sass o pasado a un mixin se convierte donde está escrito, igual que un desplazamiento de background-position dentro de un sprite dimensionado en píxeles. La lista de cambios muestra cada edición por línea, así que revisa esos casos antes de publicar.
Explora una colección cada vez más amplia para cálculos, documentos, escritura y el trabajo diario.