Cómo convertir px a rem

Pega una hoja de estilos e indica cuántos píxeles equivalen a 1rem. La página reescribe las longitudes en px y muestra el resultado con la misma pasada de formato de siempre: no se sube nada.

La división es exacta: 16px con una base de 16px son 1rem, 1.5px se convierte en 0.09375rem y una base como 16.5px se usa tal como se escribe, sin redondear.

  1. Pega o escribe el CSS en el campo. Se convierten los valores de las declaraciones y las consultas media; los selectores, las cadenas, los comentarios y el contenido de url() quedan igual.
  2. Indica cuántos píxeles equivalen a 1rem. El valor predeterminado 16 coincide con el tamaño raíz habitual del navegador y también se aceptan decimales como 16.5.
  3. Deja marcada la casilla de border cuando las abreviaturas border y border-top/right/bottom/left deban seguir en px: es la forma habitual de que un borde de 1px no escale.
  4. Pulsa Convertir y copia el resultado. Limpiar vacía la entrada y el resultado.

Qué se convierte y qué no se toca

Longitudes que se convierten

Se convierten las longitudes de los valores de las declaraciones —padding, width, font-size, expresiones calc(), propiedades personalizadas— y de las consultas media, container y supports. Un valor cuenta cuando un número va seguido de la unidad px, en cualquier combinación de mayúsculas: 10PX también se convierte.

Los valores fraccionarios se convierten tal como se escriben: 1.5px son 0.09375rem con una base de 16px y .5px son 0.03125rem. El resultado es el cociente exacto mientras la división termina; un cociente periódico, como 10px con una base de 16.5px, se redondea a doce decimales.

Texto que nunca se reescribe

Los selectores, los nombres de clase, las cadenas, los comentarios y el contenido de url() se copian intactos, así que content: "10px", .a10px y url(icon-10px.png) sobreviven a la conversión.

La herramienta pasa valores px a rem y nada más. Un valor en rem se queda como está, no existe la dirección rem a px y otras unidades como em, %, vw o pt no se tocan.

Entradas rechazadas, base y salida

Una hoja vacía, una base vacía, una base de cero o negativa y una base que no sea un número se rechazan: el mensaje aparece en la línea de estado bajo los controles y el resultado anterior se borra para que una conversión vieja no se confunda con una nueva.

Un CSS sin ningún valor px se indica como tal y aun así se muestra el CSS formateado. El formato se aplica como siempre: minificado cuando la entrada es una sola línea, con sangría cuando tiene más. Los mensajes siguen el idioma de la página: inglés, español, portugués (Brasil), alemán, francés o japonés.

Herramientas recientes: