La primera vez que un diseñador me entregó una especificación que decía " texto del cuerpo 16px, encabezados 28px, letra pequeña 13px" y el cable frontal decía " pero enviamos todo en rem, " Hice la división a mano en una aplicación de calculadora. Dieciséis sobre dieciséis es uno, veintiocho sobre dieciséis es un punto siete cinco, trece sobre dieciséis es cero punto ocho uno dos cinco. Luego, el tamaño de la fuente base cambió a diez píxeles para "62,5%" configuración en un proyecto diferente, y lo hice todo de nuevo. Después de la tercera vez construí un pequeño convertidor en el flujo de trabajo de Toolz.dev y silenciosamente me salvó de errores aritméticos en casi todos los componentes que he diseñado desde entonces.
TL;Dr: Un convertidor de unidad CSS convierte un valor en una unidad (px, rem, em, pt o %) en el valor equivalente en cada dos unidades, según el tamaño de fuente raíz que controle (16px de forma predeterminada). Para convertir px a rem, divida los píxeles por el tamaño de fuente raíz:
24px ÷ 16 = 1.5rem. Para ir en sentido contrario, multiplica:1.5rem × 16 = 24px. los Convertidor de unidades CSS hace esto instantáneamente para cada unidad a la vez, se ejecuta completamente en su navegador e incluye una tabla de referencia de px a rem desde la que puede copiar.
Esta guía cubre cómo se relacionan las unidades, por qué el tamaño de fuente base importa tanto, cuándo alcanzar cada unidad y las matemáticas exactas que ejecuta el convertidor. He diseñado muchas interfaces entre temas de WordPress, la interfaz de usuario de administración de WP Adminify y los paneles de React, y la pregunta de la unidad surge en todos ellos. Las reglas son simples una vez que ves el número único en el que todo depende.
¿por qué es importante la conversión de px a rem?
Los píxeles son la unidad que exportan casi todas las herramientas de diseño. Figma, Sketch y Photoshop piensan en píxeles, por lo que una especificación de transferencia es una lista de valores de píxeles. También es fácil razonar sobre los píxeles porque un píxel CSS es un tamaño de referencia fijo que no cambia cuando el usuario ajusta nada.
Esa solidez es exactamente el problema de las interfaces accesibles y responsivas. Cuando alguien aumenta el tamaño de fuente predeterminado de su navegador ' - una configuración en la que dependen muchas personas con baja visión - el tamaño del texto en píxeles fijos ignora el cambio por completo. El tamaño del texto en rem escala con él. Lo mismo ocurre con el zoom del navegador en algunas configuraciones más antiguas y con las hojas de estilo del usuario. Si desea que su tipografía respete las preferencias del lector 's, la dimensiona en una unidad relativa y rem es la que se comporta de manera predecible en toda una página.
Entonces, el flujo de trabajo común es: diseño en píxeles, envío en rem. Eso te deja dividiendo todo el día, y la división es donde entran pequeños errores. Escribiendo 0.8125rem en vez de 0.875rem para un valor de 13 px es el tipo de error tipográfico que se envía a producción y hace que una etiqueta parezca sutilmente incorrecta. Un convertidor elimina ese riesgo, que es la única razón por la que lo mantengo a mi alcance. Si trabajas en muchas de estas tareas, la más amplia Kit de herramientas para desarrolladores web cubre dónde encaja la conversión de unidades con los demás trabajos cotidianos.
¿cuál es la diferencia entre px, rem, em, pt y %?
Cada una de estas unidades se resuelve en una serie de píxeles CSS en el momento del renderizado, una relación Valores y Unidades CSS Nivel 4 pines hacia abajo: el píxel de referencia se define frente a una pantalla de 96 ppp, no frente a su pantalla. La diferencia es con qué se miden.
px es el píxel de referencia CSS. Es una unidad absoluta en el sentido de que no depende de ningún tamaño de fuente. 1px es 1px. Esto lo hace predecible pero tampoco responde a las preferencias del usuario.
rem significa "root em." Un rem es igual al tamaño de fuente del elemento raíz: el html elemento. Por defecto eso es 16px, entonces 1rem es 16px, 1.5rem es 24pxy 0.5rem es 8px. Debido a que siempre está ligado a la raíz, un valor rem significa lo mismo en todas partes del documento, sin importar cuán profundamente anidado esté el elemento.
em es relativo al tamaño de fuente del actual elemento. Si el tamaño de fuente de un elemento 's es 20px, entonces 1em por dentro son 20px, 1.5em es 30px, y así sucesivamente. El problema es que em se compone: si un padre establece font-size: 1.2em y un niño también se pone 1.2em, el tamaño efectivo de child's es 1,2 × 1,2 del abuelo. Esta herramienta asume un tamaño de elemento en la base, por lo que em y rem leen lo mismo, y modelas un contexto em específico configurando el tamaño de fuente base en ese elemento 's tamaño.
pt es el punto, heredado de la tipografía impresa. CSS define una pulgada como 96 píxeles y 72 puntos, entonces 1pt es igual a 96/72 ¦ 1.333px y 1px equivale a 0,75pt. Los puntos pertenecen a hojas de estilo impresas; en la pantalla son solo un múltiplo fijo del píxel de referencia.
% para el tamaño de fuente es un porcentaje del padre (o, en la raíz, de la base). 100% es igual al tamaño de referencia y 50% equivale a la mitad. En una base de 16px, 100% es 16px y 150% es 24px.
Así es como se alinean los valores comunes en la raíz predeterminada de 16px:
| px | rem | em | pt | % |
|---|---|---|---|---|
| 12 | 0,75 | 0,75 | 9 | 75 |
| 14 | 0,875 | 0,875 | 10.5 | 87,5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112,5 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 32 | 2 | 2 | 24 | 200 |
los Convertidor de unidades CSS genera esta tabla completa para cualquier base que establezca, de modo que pueda observar una escala de tipos completa a la vez.
¿Cómo cambia todo el tamaño de fuente base?
El tamaño de fuente base (raíz) es el pivote de cada unidad relativa. Cámbielo y cada conversión rem, em y % cambiará con él, mientras que px y pt permanecen en su lugar.
El valor predeterminado del navegador es 16px, razón por la cual 1rem es normal 16px. Pero puedes establecer la raíz en cualquier cosa. Se establece un patrón popular html { font-size: 62.5%; }, lo que hace que la raíz sea 10px (62,5% de 16). Ahora 1rem es una limpieza 10px, y rem math se convierte en " mueve el punto decimal": 1,6rem es 16px, 2,4rem es 24px, 0,8rem es 8px. Los equipos adoptan esto para que los números en sus hojas de estilo se lean casi como píxeles y al mismo tiempo escalen según las preferencias del usuario.
Para modelar eso en el convertidor, establezca el tamaño de fuente base en 10 y lea la columna rem. Un valor de 24px ahora se muestra como 2,4rem en lugar de 1,5rem. Así es también como razona sobre ellos en un componente que establece su propio tamaño de fuente: si una tarjeta establece font-size: 20px, entonces los valores em dentro de él son relativos a 20, así que establezca la base en 20 para ver qué 1.5em resuelve.
El error que veo con más frecuencia es olvidar con qué base se calculó un valor. Alguien convierte 24px a 1,5rem asumiendo una raíz de 16px, luego lo deja caer en un proyecto que ejecuta el truco del 62,5% donde la raíz es 10px - y 1,5rem hay 15px, no 24px. La unidad es relativa, por lo que el número sólo significa algo una vez que conoces la base. Cada vez que pego un valor rem entre proyectos, primero verifico el tamaño de fuente raíz.
¿cómo se convierte px a rem y rem a px a mano?
Las matemáticas son una división y una multiplicación.
px a rem: divida el valor del píxel por el tamaño de fuente raíz.
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
rem a px: multiplique el valor rem por el tamaño de fuente raíz.
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px a em utiliza la misma fórmula que rem cuando el elemento se encuentra en el tamaño de fuente base, por lo que 24px ÷ 16 = 1.5em. La diferencia es conceptual, no aritmética: em se mide con respecto al elemento actual, por lo que si el tamaño de ese elemento 's difiere de la raíz, usas su tamaño como base.
px a pt: multiplica por 0,75, porque 1px = 0.75pt. de esta manera 16px × 0.75 = 12pt. Mergi în altă parte, pt × 1.333 = px.
px la %: divide por la base y multiplica por 100. Entonces 24px ÷ 16 × 100 = 150%.
Nada de esto es difícil, pero hacerlo cuarenta veces mientras se diseña un componente es donde la fatiga produce errores tipográficos. Ese es precisamente el tipo de tarea repetitiva y propensa a errores Herramientas de productividad para desarrolladores la filosofía dice automatizar: descargar la aritmética para que su atención permanezca en el diseño.
¿Cuándo debes usar cada unidad?
No existe una única unidad correcta; hay una unidad adecuada para cada trabajo.
Utilice rem para tamaños de fuente. Esta es la recomendación más fuerte de la lista. Rem escala con la preferencia de tamaño de fuente del navegador user's, lo cual es una verdadera ganancia de accesibilidad, y debido a que está anclado a la raíz, no se compone inesperadamente. La mayoría de los equipos dimensionan todo su tipo en rem.
Utilice rem o px para espaciar, según su sistema. Muchos sistemas de diseño expresan margen y relleno en rem para que el espaciado se escale con el tipo. Otros mantienen el espaciado en px para diseños de píxeles perfectos. Ambos son defendibles; elige uno y sé consistente.
Úselos para cosas que deberían escalar con su propio elemento. El relleno de un botón que debería crecer con el botón 's el tamaño de fuente es un uso clásico de em: configure el relleno en em y rastreará el texto automáticamente. El tamaño del icono en relación con el texto adyacente es otro.
Utilice px para bordes y detalles finos. un 1px por lo general, la frontera debería permanecer 1px; rara vez desea una línea de cabello para escalar con el tamaño de fuente. Los puntos de interrupción de consultas de medios también suelen escribirse en px, aunque algunos los prefieren allí para el comportamiento de zoom.
Utilice pt sólo en hojas de estilo impresas. Si estás diseñando algo para @media print, los puntos son la unidad nativa de impresión y vale la pena usarlos. En pantalla, prefiera px o rem.
Utilice % para anchos de fluidos y ocasionalmente tamaños de fuente. El porcentaje está en todas partes en el diseño (width: 50%), y como tamaño de fuente a veces se usa en la raíz para el truco del 62,5%.
¿cuáles son los errores comunes con las unidades CSS?
El primero es el problema de falta de coincidencia de bases ya descrito: convertir contra el tamaño de fuente raíz incorrecto. Conozca siempre su raíz antes de confiar en un número rem.
El segundo son valores rem demasiado precisos. Algunas conversiones no se dividen uniformemente: 15px en una base de 16px es 0,9375rem y 13px es 0,8125rem. Esos decimales largos son exactos pero feos, y redondearlos demasiado fuerte (digamos a 0,94rem) cambia el tamaño renderizado en una fracción de píxel. Mi regla: mantener tres o cuatro decimales para rem, o elegir valores de base y tamaño que se dividan limpiamente. El convertidor redondea con sensatez y recorta los ceros finales 24px lee como 1.5rem más bien que 1.5000rem.
El tercero es componerlos. Los elementos anidados en los que cada uno establece un tamaño de fuente em multiplican el efecto, por lo que un elemento profundamente anidado puede terminar siendo mucho más grande o más pequeño de lo previsto. Si les resulta sorprendente, esa combinación es casi siempre la razón: cámbielos a rem y la sorpresa desaparecerá.
El cuarto supone que pt y px son intercambiables. No lo son; 12pt es 16px, no 12px. Mezclarlos en una hoja de estilo que abarca pantalla e impresión es un error sutil.
¿cómo maneja el convertidor Toolz.dev los cálculos?
Debajo del capó, el convertidor utiliza una idea: expresar cada unidad como un número de píxeles y luego convertir a través de píxeles. Cada unidad tiene un " fijo;píxeles por unidad" dado el tamaño de fuente base, px es 1, rem y em son la base, pt es 96/72 y % es base/100. Para convertir, multiplica la entrada por su unidad 's píxeles por unidad para obtener un valor de píxel, luego lo divide por la unidad de destino 's píxeles por unidad. Esa única pasada proporciona todas las unidades a la vez, razón por la cual ves px, rem, em, pt y % actualizarse juntos a medida que escribes.
También analiza valores con unidades adjuntas, por lo que pega 24px completa tanto el número como la unidad por usted. Los resultados se redondean a unos pocos decimales y se eliminan los ceros finales para facilitar la lectura, y cada uno tiene un botón de copia con un solo clic que copia el valor con su sufijo de unidad listo para pegar en CSS. Todo se ejecuta en el lado del cliente, no se carga nada de lo que escriba, lo que coincide con el enfoque de privacidad primero detrás de cada herramienta del sitio.
Si también elige colores o crea sombras para el mismo componente, el Generador de gradiente CSS y Generador de sombras de caja vive a un clic de distancia y el más amplio convertidor unitario maneja unidades físicas como longitud y peso cuando su trabajo se desvía fuera de CSS.
Preguntas frecuentes
¿Cómo convierto px a REM?
Divida el valor de píxel por el tamaño de fuente raíz. En el valor predeterminado del navegador de 16px, rem = px ÷ 16, por lo que 16px es 1rem, 24px es 1.5rem y 8px es 0.5rem. Introduzca el valor de píxeles en el convertidor y el equivalente REM aparecerá instantáneamente en el tamaño de fuente base que establezca.
¿Cómo convierto REM a PX?
Multiplique el valor REM por el tamaño de fuente raíz. En una base de 16px, px = rem × 16, por lo que 1rem es 16px, 1.5rem es 24px y 0.75rem es 12px. Cambie el tamaño de fuente base en la herramienta si su elemento HTML usa un valor diferente.
¿Cuál es el tamaño de fuente raíz predeterminado?
Los navegadores configuran el elemento html en 16px de forma predeterminada, razón por la cual este convertidor comienza en 16. Debido a que 1rem siempre es igual al tamaño de fuente raíz, ese valor predeterminado hace que 16px sea igual exactamente a 1rem. Los usuarios pueden cambiar el tamaño de texto predeterminado de su navegador 's, que es una de las razones por las que se prefiere la tipografía accesible y escalable.
¿Cuál es la diferencia entre REM y EM?
Un rem siempre es relativo al tamaño de fuente html raíz, por lo que se mantiene consistente en toda la página. Un em es relativo al tamaño de fuente del elemento actual, por lo que puede componerse cuando los elementos anidados establecen cada uno su propio tamaño. Establezca el tamaño de fuente base en la herramienta para modelar un contexto em específico.
¿Cómo se relacionan PX y PT en CSS?
CSS define una pulgada como 96 píxeles y 72 puntos, por lo que 1pt equivale a 96/72 ¦ 1,333px y 1px equivale a 0,75pt. Los puntos provienen de la tipografía de impresión; en pantalla son un múltiplo fijo del píxel de referencia CSS. Utilice px o rem para trabajar en pantalla y reserve pt para imprimir hojas de estilo.
¿qué hace el truco del tamaño de fuente del 62,5%?
Configurar el tamaño de fuente html al 62,5% hace que el tamaño de fuente raíz sea 10px, por lo que 1rem se convierte en un conveniente 10px y rem math se convierte en mover el decimal: 1,6rem es 16px, 2,4rem es 24px. Para modelar esto en el convertidor, establezca el tamaño de fuente base en 10 y lea la columna rem.
¿Debo usar px o rem para tamaños de fuente?
Generalmente se prefiere Rem para tamaños de fuente porque escala con la preferencia de tamaño de fuente del navegador user's, lo que mejora la accesibilidad, mientras que px fijo no. Muchos equipos diseñan en px y convierten a rem para el CSS final. Los detalles del diseño, como los bordes, a menudo permanecen en px.
¿Por qué el valor convertido tiene decimales largos a veces?
Algunas conversiones no son exactas: 15px en una base de 16px es 0,9375rem y los valores de pt a menudo producen decimales repetidos. La herramienta redondea con unos pocos decimales y recorta los ceros finales para facilitar la lectura. Para diseños de píxeles perfectos, redondee los valores rem a dos o tres decimales o elija una base que divida sus tamaños limpiamente.
