Convertir rem a px Root em ↔ Pixels Gratis En línea Seguro
Escriba un valor en rem y léalo al instante en px. La cuenta se hace en su navegador, no se envía nada a ninguna parte, y de qué depende el resultado está escrito más abajo en vez de darse por supuesto.
No se sube nada
Tamaños habituales — Convertir rem a px
| rem | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
De dónde vienen estas unidades
El píxel de CSS no es el píxel de su pantalla. Cuando las pantallas dejaron de tener una densidad previsible, una página medida en píxeles reales se convirtió en una página que encogía a medida que las pantallas se afinaban, así que el píxel CSS se redefinió como una longitud de referencia: alrededor de 1/96 de pulgada, visto a una distancia cómoda de lectura. Todo lo demás de esta página se asienta en eso. El em es más viejo que la web —en tipos de plomo era el ancho de un bloque fundido, llamado así por la M mayúscula— y en CSS significa el tamaño de letra vigente, razón por la cual cambia al anidar elementos. El rem se añadió precisamente para escapar de ello: es el em del elemento raíz y nunca se compone. El vw llegó con el diseño adaptable: una centésima del ancho de la ventana, sea cual sea.
Dónde se las encuentra
Estas son las unidades de cualquier hoja de estilo. Los píxeles dimensionan bordes, sombras y todo lo que no debe escalar; el rem dimensiona la tipografía, los espaciados y la maquetación, de modo que un solo cambio en la raíz redimensiona una interfaz entera; el em dimensiona lo que debe seguir a su propio texto, como el relleno de un botón; el vw dimensiona titulares y cabeceras que han de llenar la pantalla en cualquier dispositivo. Convertir entre ellos es la aritmética diaria de volver una maqueta entregada en píxeles una hoja de estilo que escala.
Preguntas frecuentes
¿Por qué 16 px es el punto de partida habitual?
Porque es el tamaño de texto por omisión en todos los navegadores importantes, y una hoja de estilo que no lo cambia lo hereda. Un rem equivale por tanto a 16 px con el ajuste por omisión, y de ahí vienen las conversiones familiares: 0,5 rem son 8 px, 1,5 rem son 24 px. Si un usuario ha agrandado ese valor en los ajustes de su navegador, esos mismos valores en rem crecen con él, que es justamente para lo que sirven.
¿Debo usar rem o em?
Rem para todo lo que deba seguir a la página en conjunto —escala tipográfica, espaciados, anchos de maquetación—, porque se mide desde la raíz y nunca se acumula. Em para todo lo que deba seguir al texto en que está: el relleno de un botón, el hueco junto a un icono, la sangría de una cita. El error común es anidar elementos dimensionados en em: 1,2 em dentro de 1,2 em se vuelve 1,44, luego 1,73, hasta que el texto del pie de página mide el doble de lo previsto.
¿El resultado es exacto?
Donde ambas unidades se definen una por otra con números enteros, sí: la página lo dice encima de la cifra, y el único redondeo está en cuántos dígitos se muestran. Donde la razón no tiene decimal finito, la página muestra doce cifras significativas y califica la relación de aproximada en vez de fingir otra cosa.
¿Algo de lo que escribo sale de mi dispositivo?
No. La aritmética se hace en su navegador; no se sube nada, y tampoco hay servidor que lo reciba. Cargada una vez, la página sigue funcionando con la red apagada.
Por qué necesita convertir rem a px
Abre una hoja de estilos y ve padding: 2.25rem en una tarjeta y font-size: 0.8125rem en una leyenda. Son buenos valores, escritos como debe escribirse el CSS moderno, y no le dicen nada a primera vista. ¿Qué tamaño tiene en pantalla ese relleno de tarjeta? ¿Se podrá leer la leyenda? ¿Coincide con los 36 px y 13 px del archivo de diseño que le entregaron? Para responder, convierte rem a px: multiplica por el tamaño de fuente de la raíz y lee la respuesta en la unidad que usan las herramientas de diseño. Es la dirección inversa a la habitual, y es lo que se hace al leer código, al comprobar una maqueta contra una versión construida o al explicar un diseño a alguien que piensa en píxeles.
La conversión es fácil; lo que merece una página es la base. Un rem no es un tamaño, es un múltiplo de un tamaño, el tamaño de fuente del elemento raíz. En un navegador al que nadie ha dicho otra cosa ese tamaño es de 16 px, así que 1 rem son 16 px, 2.25 rem son 36 px y 0.8125 rem son 13 px. Pero la hoja de estilos puede cambiar la raíz, y el lector puede cambiarla en el navegador, y entonces todos los valores rem de la página se mueven con ella. Por eso la página pide la base y la usa, en lugar de ocultarla.
El cálculo se hace en su navegador y no se sube nada. A continuación encontrará la fórmula, una tabla de valores habituales, lo que la conversión conserva y lo que no puede conservar, las situaciones en que los desarrolladores necesitan convertir rem a px y unos cuantos hábitos que mantienen fácil de leer una hoja de estilos basada en rem.
La fórmula y la base
px es igual a rem multiplicado por la base
La fórmula es una multiplicación: px = rem × base. Con la base habitual de 16 px, 1.5 rem se convierte en 24 px, 0.75 rem en 12 px y 4 rem en 64 px. La página imprime la base junto al resultado, de modo que una línea como 1.5 rem = 24 px (16 px) indica lo que supuso y se ve de inmediato si coincide con su proyecto.
Averiguar su base
Busque en la hoja de estilos una regla sobre html o :root que fije font-size. Si no hay ninguna, la base es el valor por defecto del navegador, 16 px. Si la hay, como 62.5%, tome ese porcentaje de 16: 62.5% da 10 px. En las herramientas de desarrollo del navegador también puede seleccionar el elemento raíz y leer su tamaño de fuente calculado, que es el número que debe escribir en el campo de la base.
Cuando el tamaño de la raíz es fluido
Algunos sitios hacen que el tamaño de la raíz crezca con la ventana, usando una expresión clamp. Entonces 1 rem no tiene ningún valor único en píxeles: son 15 px en un teléfono y 18 px en un monitor ancho. En ese caso cualquier conversión es una instantánea. Escriba la base que ve con el ancho que le interesa y tenga en cuenta que la respuesta solo es válida con ese ancho.
Lo que la conversión conserva y lo que no puede
Conserva la proporción
Un rem es lo que sea el tamaño de fuente de la raíz, así que un diseño escrito en rem conserva su forma cuando ese tamaño cambia. Cuando convierte rem a px, el valor en píxeles es esa misma proporción hecha concreta para una base particular. La relación entre dos tamaños, por ejemplo un encabezado de 2 rem sobre un texto de cuerpo de 1 rem, no cambia por mucho que la convierta, y esa relación es aquello de lo que depende un buen diseño.
No puede conocer los ajustes de su lector
El número depende por completo de la base. Si el lector ha aumentado el tamaño de texto por defecto de su navegador, algo que mucha gente hace y tiene derecho a hacer, entonces 1 rem no son 16 px para esa persona, y la cifra que usted ve es correcta solo para la base del campo. Trate el valor en píxeles como una manera de entender el diseño, no como una promesa de lo que verá cada visitante.
Redondeo
Como la base suele ser un número entero, el resultado de multiplicar suele ser exacto. 0.8125 rem son exactamente 13 px con una base de 16; 0.6875 rem son exactamente 11 px. Si obtiene un decimal largo, es señal de que el valor rem se calculó a partir de una base distinta de la que escribió.
Valores habituales
La tabla al pie de la página
La página incluye una tabla de los valores en píxeles a los que corresponden las cifras rem habituales con la base que haya fijado: 0.5 rem son 8 px, 0.625 son 10, 0.75 son 12, 0.875 son 14, 1 son 16, 1.125 son 18, 1.25 son 20, 1.5 son 24, 2 son 32, 3 son 48 y 4 son 64. Estos son los valores que aparecen con más frecuencia en el espaciado y en las escalas tipográficas, y conocerlos de memoria hace legible una hoja de estilos de un vistazo.
Leer una hoja de estilos en píxeles
Un ejercicio útil es tomar una hoja de estilos que no escribió y traducir una vez sus valores principales a píxeles, anotando los resultados. Un tamaño de cuerpo de 1 rem, encabezados de 1.5 y 2.25 rem, un hueco de contenedor de 2 rem: en píxeles, 16, 24, 36 y 32. Visto así, aparece la lógica del diseño, y puede compararla con el archivo de diseño sin calculadora.
Cómo convertir rem a px aquí
Escriba el valor en rem
Introduzca el tamaño en rem en el primer campo. Se aceptan decimales, así que 0.8125 funciona igual que 1.
Fije la base
Déjela en 16 si su CSS no cambia el tamaño de la raíz. Cámbiela si lo cambia. El resultado se actualiza a medida que escribe.
Lea el valor en píxeles
La respuesta aparece al instante, con la base mostrada a su lado, para que pueda saber qué se supuso. Cópiela en sus notas o compárela con el archivo de diseño.
De dónde vienen estas unidades
El píxel CSS
Cuando las pantallas dejaron de tener una densidad predecible, una página medida en píxeles reales se convirtió en una página que se encogía a medida que las pantallas se hacían más nítidas. Así que el píxel CSS se redefinió como una longitud de referencia: aproximadamente 1/96 de pulgada vista a una distancia cómoda de lectura. Un píxel de una hoja de estilos no es, por tanto, un punto de su pantalla sino una unidad de longitud que el navegador traslada a tantos puntos como necesite la pantalla.
El rem
El em es más antiguo que la web: en la tipografía de metal era la anchura de un bloque fundido, nombrado por la M mayúscula, y en CSS significa el tamaño de fuente vigente, por lo que cambia al anidar elementos. El rem se añadió para escapar justamente de eso: es el em del elemento raíz y nunca se acumula. Para ver la diferencia en números, convierta px a em y compárelo con lo que obtiene cuando convierte rem a px.
Cuándo convierten los desarrolladores rem a px
Comprobar una versión construida contra un archivo de diseño
Un diseñador entrega un archivo en píxeles; el desarrollador escribió el código en rem. Para comprobar que la página coincide, convierte rem a px y compara números. Una discrepancia salta a la vista: 1.375 rem son 22 px, y si el diseño dice 24, uno de los dos está mal.
Leer código desconocido
Cuando hereda una hoja de estilos, los valores rem ocultan los tamaños reales. Convertir un puñado de los principales le da un mapa del diseño: qué tamaño tiene la tipografía, qué anchura tienen los márgenes laterales, dónde caen los puntos de ruptura.
Escribir informes de errores y documentación
Quienes prueban una página describen lo que ven en píxeles. Un desarrollador que dice que el relleno es 2.5 rem significa poco para un probador; 40 px significa algo. Convertir hace que ambas partes se entiendan.
Fijar valores que deben ser exactos en píxeles
Algunas cosas tienen que ser un número exacto de píxeles del dispositivo o se ven borrosas: un borde de un píxel, un icono dibujado en una cuadrícula de 24 px. Si un tamaño debe caer en la cuadrícula de píxeles, convertir rem a px le dice si lo hace con su base.
Trampas al convertir rem a px
Olvidar que se cambió el tamaño de la raíz
Si la raíz se fija en 62.5% o en una expresión clamp, el factor estándar de 16 no se aplica. El resultado se equivoca en la relación entre las dos bases. Compruebe siempre la base primero.
Confundir rem con em
Em es relativo al tamaño de fuente del propio elemento, no al de la raíz. Un valor de 1.5em dentro de un encabezado de 24 px son 36 px, pero dentro de un párrafo de 16 px son 24 px. Esta página convierte rem, que no tiene esa ambigüedad. Para em, vea em a px.
Suponer que la pantalla muestra los mismos píxeles
Un píxel CSS no es un píxel del dispositivo. En una pantalla de alta densidad un píxel CSS pueden ser dos o tres píxeles del dispositivo. La conversión da píxeles CSS, que es lo que usan tanto las herramientas de diseño como la hoja de estilos.
Redondear demasiado pronto
Si redondea 13.333 px a 13 y luego convierte de vuelta, obtiene 0.8125 rem, no el 0.8333 del que partió. Conserve el valor rem original cuando importe.
Preguntas que la gente se hace antes de convertir
¿Cuántos píxeles es 1 rem?
Dieciséis, en un navegador cuyo valor por defecto no se ha cambiado.
¿Cuántos píxeles son 2 rem?
Treinta y dos con la base por defecto. Con una base de 10 serían 20.
¿Por qué mi navegador muestra algo distinto?
El ajuste del lector o una regla de la hoja de estilos ha cambiado el tamaño de la raíz. Mire el tamaño de fuente calculado del elemento raíz en las herramientas de desarrollo.
¿Es rem lo mismo que em?
No. Rem se refiere al elemento raíz y em se refiere al propio elemento.
¿Se sube mi número?
No. La aritmética se ejecuta en su navegador y no se envía nada a ninguna parte.
¿Cómo vuelvo atrás?
Con px a rem, que divide en lugar de multiplicar.
Hábitos que hacen fácil de leer una hoja de estilos en rem
Escriba el valor en píxeles en un comentario
Una línea como gap: 1.5rem; /* 24px */ cuesta unos pocos caracteres y ahorra una conversión al lector siguiente. También registra la base que supuso.
Use una escala pequeña
Un proyecto que usa solo un puñado de valores rem, como 0.5, 1, 1.5, 2 y 3, es fácil de aprender: al cabo de un día los conoce en píxeles sin pensar. Cuando convierte rem a px para una hoja de estilos así, solo está confirmando lo que recuerda.
Ponga nombre a sus valores
Con propiedades personalizadas, como --space-md: 1.5rem, la hoja de estilos describe la intención en lugar de números. El nombre lleva el significado, y el número está en un solo lugar.
Pruebe con otro tamaño por defecto
Aumente el tamaño de texto por defecto en su navegador y mire la página. Si se mantiene unida, el diseño está de verdad construido en rem. Si se rompe, algo se dejó en píxeles.
Usar bien el valor en píxeles después de convertir rem a px
Compare relaciones, no solo números
Cuando convierte rem a px para toda una hoja de estilos, mire las relaciones entre los tamaños además de los tamaños mismos. Una escala tipográfica en la que cada paso es aproximadamente 1.25 veces el anterior da 16, 20, 25, 31 y 39 píxeles; una escala de 1.5 da 16, 24, 36 y 54. Detectar la relación le dice lo que pretendía el diseñador y le permite ampliar la escala de forma coherente cuando necesite un tamaño nuevo.
Traduzca para quienes piensan en píxeles
No todo el mundo en un equipo lee rem. Los jefes de proyecto, los redactores y los clientes suelen trabajar a partir de capturas de pantalla y piden que un encabezado sea un poco mayor. Si puede decir que el encabezado mide ahora 36 px y sería de 40 px con 2.5 rem, la conversación es corta. La página es útil como un puente rápido entre los dos vocabularios.
Compruebe objetivos táctiles y tamaños mínimos
Las pautas para pantallas táctiles piden objetivos de al menos unos 44 px, y las pautas para el texto piden un texto de cuerpo de alrededor de 16 px o más. Ambas se expresan en píxeles. Para verificar una hoja de estilos escrita en rem frente a ellas, convierta rem a px y vea si los botones y el texto superan la línea.
Tenga en cuenta el caso ampliado
El valor que obtiene es para la base que escribió. Si sus lectores pueden agrandar el texto, pruebe de nuevo la conversión con una base de 20 o 24 y vea qué exige el diseño a la pantalla. Una tarjeta que es cómoda con 16 puede desbordarse con 24, y el mejor momento para descubrirlo es antes de publicar la página.
Conversores relacionados
La misma familia de herramientas cubre las conversiones vecinas. Para volver a rem, use px a rem. Para los tamaños relativos al elemento, están px a em y em a px, y para los tamaños relativos a la pantalla, px a vw y vw a px. Para los colores de la misma hoja de estilos, HEX a RGB y HSL a HEX están a mano, y para los nombres de clase, texto a kebab-case convierte una frase en un nombre que CSS acepta.
Un ejemplo resuelto
Digamos que está revisando una solicitud de cambios y la hoja de estilos tiene una sección de cabecera con padding: 5rem 1.5rem, un título de 3.5rem y un párrafo de entrada de 1.25rem. El archivo de diseño dice 80 px y 24 px de relleno, un título de 56 px y una entrada de 20 px. Escribe 5 y lee 80 px, escribe 1.5 y lee 24, escribe 3.5 y lee 56, escribe 1.25 y lee 20. Los cuatro coinciden, así que la versión construida es fiel. Si el título hubiera sido de 3.25 rem, habría leído 52 y habría detectado la diferencia antes de que llegara al diseñador.
Una breve lista de comprobación
Antes de convertir
Encuentre la base: la regla de la raíz en la hoja de estilos, o el tamaño calculado en las herramientas de desarrollo.
Mientras convierte
Escriba el valor en rem, compruebe la base mostrada junto al resultado y anote la cifra en píxeles.
Después de convertir
Compare con el archivo de diseño. Si los números difieren, compruebe la base antes de sospechar del código.
Errores comunes
Usar 16 sin comprobar
Es el valor por defecto, no una regla. Compruebe la raíz.
Tratar los píxeles como definitivos
La respuesta vale para una base. Un lector con un valor por defecto mayor ve píxeles mayores.
Confundir rem y em
Se parecen y se comportan de forma distinta. Use la página correcta para cada uno.
Sus números se quedan en su dispositivo
El cálculo se hace localmente. Sus valores los usa su propio navegador y no se envía nada a ninguna parte. No hay nada que borrar después ni ninguna cuenta que crear. Esa es la manera sencilla de convertir rem a px.
Resumen
Para convertir rem a px aquí, escriba el tamaño en rem y léalo al instante en píxeles, usando la fórmula px = rem × base. La base empieza en 16 px, el valor por defecto de un navegador, y puede cambiarla para que coincida con su CSS. La conversión conserva la proporción, ya que un rem es lo que sea el tamaño de fuente de la raíz, y no puede conocer los ajustes de su lector, así que la cifra es correcta solo para la base del campo. La tabla de valores habituales, desde 0.5 rem a 8 px hasta 4 rem a 64 px, le ayuda a leer una hoja de estilos de un vistazo. No se sube nada.