Cómo se usa
- Introduce el tamaño en píxeles de la fuente de html en Tamaño de fuente raíz.
- En la pestaña CSS, elige px → rem o rem → px en Dirección.
- Pega tu hoja de estilos en el editor Tu CSS y obtén el resultado en CSS convertido.
Ejemplos
Convertir una tarjeta sin cambiar el borde de 1px
.tarjeta {
padding: 24px;
font-size: 18px;
border: 1px solid #ccc;
}.tarjeta {
padding: 1.5rem;
font-size: 1.125rem;
border: 1px solid #ccc;
}Pasar solo la tipografía a rem
.aviso {
font-size: 14px;
line-height: 20px;
letter-spacing: 0.5px;
padding: 12px 16px;
}.aviso {
font-size: 0.875rem;
line-height: 1.25rem;
letter-spacing: 0.031rem;
padding: 12px 16px;
}Volver a píxeles con una raíz de 20px
.catalogo {
gap: 0.75rem 2rem;
padding: 1rem;
}.catalogo {
gap: 15px 40px;
padding: 20px;
}Consejos
- Ordena el archivo convertido con el Formateador CSS.
- Redúcelo de tamaño con el Minificador CSS.
Preguntas frecuentes
¿Cuántos píxeles son 1 rem?
1 rem equivale al tamaño de fuente del elemento raíz, html. Con una raíz de 16px, 1 rem son 16px; para pasar de px a rem, divide los píxeles entre ese tamaño.
¿Cuál es la diferencia entre rem y em?
rem toma como referencia el tamaño de fuente raíz, el de html; em toma el del elemento padre, que se indica en Tamaño de fuente del padre para em. Puedes convertir valores individuales entre ambas unidades, pero la conversión de CSS solo admite px y rem.
¿Por qué algunos valores siguen en px?
Con Mantener 1px activado, los valores distintos de cero entre −1px y 1px se conservan en px. Con Solo propiedades de fuente en Propiedades, solo se convierten font, font-size, line-height y letter-spacing.
¿Se pueden convertir las media queries a rem?
Activa Convertir media queries para convertir también los valores de @media y @container. Ten en cuenta que las media queries en rem usan el tamaño de fuente predeterminado del navegador, no el tamaño raíz de tu página.
¿Se envía mi CSS a un servidor?
La conversión se realiza en tu navegador y el código de la herramienta no envía tus valores ni tu CSS. No se guardan los datos introducidos; se conservan los ajustes y la última pestaña, y la página envía eventos de uso a Google Analytics sin incluir los valores ni el CSS.