Guía completa cuándo usar Em vs. Rem

Es posible que haya llegado a un acuerdo con el uso de unidades de medida flexibles, pero es posible que no entienda completamente cuándo usar movimiento rápido del ojo y cuando usar em. Este tutorial te ayudará a resolverlo.!

Ambos em y movimiento rápido del ojo son unidades flexibles y escalables que el navegador traduce en valores de píxeles, según la configuración de tamaño de fuente en su diseño. Si usas un valor de 1em o 1rem, Se podría traducir en el navegador como algo de 16px a 160px o cualquier otro valor.

CSS relleno establecido en 1em Computa a 16px CSS relleno establecido en 1em Computa a 160px

Por otra parte px Los valores son utilizados por el navegador tal cual, por lo que 1px siempre se mostrará exactamente 1px.

Pruebe el control deslizante en este ejemplo de CodePen para ver cómo el valor de movimiento rápido del ojo y em las unidades se pueden traducir a diferentes valores de píxeles, mientras se establecen explícitamente px Las unidades permanecen fijas en tamaño:

La gran pregunta

Utilizando em y movimiento rápido del ojo Las unidades nos brindan flexibilidad en nuestros diseños y la capacidad de escalar elementos hacia arriba y hacia abajo, en lugar de estar atascados con tamaños fijos. Podemos usar esta flexibilidad para hacer que nuestros diseños sean más fáciles de ajustar durante el desarrollo, más receptivos y para permitir que los usuarios del navegador controlen la escala general de los sitios para una máxima legibilidad.

Ambos em y movimiento rápido del ojo Las unidades proporcionan esta flexibilidad y funcionan de manera similar, por lo que la gran pregunta es cuándo debemos usar em valores y cuando debemos usar movimiento rápido del ojo valores?

Diferencia crucial

La diferencia entre em y movimiento rápido del ojo unidades es cómo el navegador determina la px valor que se traducen en. Comprender esta diferencia es la clave para determinar cuándo usar cada unidad.

Vamos a empezar repasando cómo movimiento rápido del ojo y em Las unidades trabajan desde cero para asegurarse de que conocen cada detalle. Entonces vamos a pasar a por qué Deberías usar em o movimiento rápido del ojo unidades.

Finalmente, veremos la aplicación práctica de exactamente qué elementos de un diseño típico debe usar cada tipo de unidad en.

Cómo movimiento rápido del ojo Unidades de conversión a valores de píxeles

Cuando usas movimiento rápido del ojo unidades, el tamaño de píxel al que se traducen depende del tamaño de fuente del elemento raíz de la página, es decir, el html elemento. Ese tamaño de fuente raíz se multiplica por el número que esté utilizando con su movimiento rápido del ojo unidad.

Por ejemplo, con un tamaño de fuente de elemento raíz de 16px, 10rem equivaldría a 160px, es decir, 10 x 16 = 160.

Conjunto de relleno CSS a 10rem Computa a 160px

Cómo em Unidades de conversión a valores de píxeles

Cuando usas em unidades, el valor de píxel con el que termina es una multiplicación del tamaño de fuente en el elemento que se está diseñando.

Por ejemplo, si un div tiene un tamaño de fuente de 18px, 10em equivaldría a 180px, es decir, 10 x 18 = 180.

Conjunto de relleno CSS a 10em Computa a 180px (o lo suficientemente cerca)

Importante saber:

Es un error un tanto generalizado que em las unidades son relativas al tamaño de fuente del elemento padre. De hecho, según la especificación W3, son relativos al tamaño de fuente "del elemento en el que se utilizan".

Tamaños de fuente del elemento principal puede efecto em Valores, pero cuando eso sucede es únicamente por herencia. Veamos por qué y veamos cómo funciona esto en acción..

El efecto de la herencia en em Unidades

Trabajando con em las unidades pueden comenzar a complicarse cuando se trata de la herencia, porque cada elemento hereda automáticamente el tamaño de fuente de su padre. El efecto de la herencia solo puede anularse estableciendo explícitamente un tamaño de fuente con una unidad que no esté sujeta a herencia, como px o vw.

El tamaño de fuente del elemento en el que em Las unidades que se utilizan determinan su tamaño. Pero ese elemento puede haber heredado un tamaño de fuente de su padre, que heredó un tamaño de fuente de su padre, y así sucesivamente. Como tal es posible para cualquier em Valor a ser efectuado por el tamaño de fuente de cualquiera de sus padres..

Veamos un ejemplo. Siéntete libre de probar esto en CodePen por ti mismo a medida que avanzamos en él. A medida que avanza, use Chrome Developer Tools o Firebug para Firefox para inspeccionar los valores de píxeles que nuestro em las unidades se calculan en.

Ejemplo de em Herencia

Si tenemos una página con un tamaño de fuente raíz de 16px (por lo general, el valor predeterminado) y un div niño en su interior con relleno de 1.5em, que div heredará el tamaño de fuente de 16px desde el elemento raíz. Por lo tanto su relleno se traducirá a 24px, es decir, 1.5 x 16 = 24.

Entonces, ¿qué pasa si envolvemos otro div alrededor del primero y configuramos su tamaño de fuente a 1.25em?

Nuestra envoltura div hereda el tamaño de fuente de la raíz 16px y multiplica eso por su propia cuenta. tamaño de fuente ajuste de 1.25em. Esto establece el div para tener un tamaño de fuente de 20px, es decir, 1.25 x 16 = 20.

Ahora nuestro div original ya no se hereda directamente del elemento raíz, en lugar de eso, está heredando un tamaño de fuente de 20px a partir de su nuevo div padre. Su valor de relleno de 1.5em ahora equivale a 30px, es decir, 1.5 x 20 = 30.

Este efecto de escala se puede aumentar aún más si añadimos un em tamaño de fuente basado en nuestro div original, digamos 1.2em.

El div hereda el 20px tamaño de fuente de su padre, luego multiplica eso por su propia 1.2em configuración, dándole un nuevo tamaño de fuente de 24px, es decir, 1.2 x 20 = 24.

los 1.5em el relleno en nuestra div ahora cambiará de tamaño nuevamente con el nuevo tamaño de fuente, esta vez para 36px, es decir, 1.5 x 24 = 36.

Por último, para ilustrar aún más que em las unidades son relativas al tamaño de fuente del elemento en el que se utilizan, (no el elemento principal), veamos qué sucede con nuestro relleno de 1.5em Si establecemos explícitamente el div para utilizar un tamaño de fuente de 14px, un valor no sujeto a herencia.

Ahora, nuestro relleno se ha reducido a 21px, es decir, 1.5 x 14 = 21. No se ve afectado por el tamaño de fuente del elemento principal.

Con todo este potencial de complicación, puede ver por qué es importante saber cómo usar em unidades de una manera manejable.

El efecto de la configuración del navegador en el tamaño de fuente del elemento HTML

Por defecto, los navegadores suelen tener un tamaño de fuente de 16px, pero el usuario puede cambiar este valor en cualquier lugar de 9px a 72px.

Importante saber:

La raíz html el elemento hereda su tamaño de fuente de la configuración en el navegador, a menos que se invalide con un valor fijo establecido explícitamente.

Así, mientras que el tamaño de fuente en la html elemento es lo que determina directamente movimiento rápido del ojo Valores, que el tamaño de la fuente puede provenir primero de la configuración del navegador.

Por lo tanto, la configuración del tamaño de fuente del navegador puede afectar el valor de cada movimiento rápido del ojo unidad utilizada en un diseño, así como cada em unidad por herencia.

Efecto de configuración del navegador cuando no se establece ningún tamaño de fuente HTML

A menos que se invalide, el html elemento que heredará cualquiera que sea la configuración de tamaño de fuente predeterminada en el navegador. Por ejemplo, tomemos un sitio donde no tamaño de fuente propiedad se establece en el html elemento.

Si un usuario tiene su navegador en el tamaño de fuente predeterminado de 16px, el tamaño de fuente de la raíz será 16px. En Chrome Developer Tools puedes ver lo que un elemento ha heredado al verificar Mostrar propiedades heredadas bajo la Computado lengüeta.

En este caso 10rem Igual a 160px, es decir, 10 x 16 = 160.

Si el usuario aumenta el tamaño de fuente de su navegador hasta 18px, el tamaño de fuente de la raíz se convierte en 18px. Ahora 10rem traduce a 180px, es decir, 10 x 18 = 180.

Efecto de configuración del navegador con em Unidad de tamaño de fuente HTML

Cuando un em tamaño de fuente basado se establece en el html elemento, el valor de píxel al que se traducirá será un múltiplo de la configuración de tamaño de fuente del navegador.

Por ejemplo, si el sitio html elemento tenía un tamaño de fuente propiedad establecida en 1.25em, el tamaño de fuente raíz sería 1.25 veces la configuración de tamaño de fuente del navegador.

Si el tamaño de la fuente del navegador se estableció en 16px, el tamaño de la fuente raíz saldría como 20px, es decir, 1.25 x 16 = 20.

En este caso 10rem sería igual 200px, es decir, 10 x 20 = 200.

Sin embargo, si el tamaño de la fuente del navegador se estableció en 20px, el tamaño de la fuente raíz se traduciría a 25px, es decir, 1.25 x 20 = 25.

Ahora 10rem sería igual 250px, es decir, 10 x 25 = 250.

Resumiendo em vs. movimiento rápido del ojo Diferencia

Lo que todo lo anterior se reduce a esto es:

• Traducción de movimiento rápido del ojo El valor de las unidades en píxeles se determina por el tamaño de fuente de html elemento. Este tamaño de fuente se ve influenciado por la herencia de la configuración del tamaño de fuente del navegador a menos que se invalide explícitamente con una unidad que no esté sujeta a herencia.

• Traducción de em Las unidades a los valores de píxel están determinadas por el tamaño de fuente del elemento en el que se utilizan. Este tamaño de fuente está influenciado por la herencia de los elementos principales, a menos que se invalide explícitamente con una unidad que no esté sujeta a herencia..

Por que usar movimiento rápido del ojo Unidades:

El mayor poder que movimiento rápido del ojo La oferta de unidades no es solo que ofrezcan un tamaño consistente independientemente de la herencia del elemento. Más bien, es que nos dan una manera de que la configuración del tamaño de fuente del usuario influya en cada aspecto del diseño de un sitio usando movimiento rápido del ojo unidades donde solíamos usar px unidades.

Por esta razón, el propósito principal de usar movimiento rápido del ojo las unidades deben ser para garantizar que, independientemente del tamaño de fuente predeterminado que un usuario tenga configurado para su navegador, el diseño se ajustará para adaptarse al tamaño del texto que contiene..

Se puede diseñar un sitio inicialmente enfocándose en el tamaño de fuente de navegador predeterminado más común de 16px.

Tamaño de fuente del navegador 16px

Pero usando movimiento rápido del ojo Unidades, si un usuario aumenta su tamaño de fuente, se preservará la integridad del diseño, y el texto no se aplastará en un espacio rígido destinado a texto más pequeño.

Tamaño de fuente del navegador 34px

Y si el usuario disminuye el tamaño de la fuente, el diseño completo se reduce y no quedará con una pequeña cantidad de texto en un terreno baldío..

Tamaño de fuente del navegador 9px

Los usuarios cambian la configuración de tamaño de fuente por todo tipo de razones, desde la vista forzada hasta la elección de configuraciones óptimas para dispositivos que pueden ser muy diferentes en tamaño y distancia de visualización. Acomodar estos ajustes permite experiencias de usuario mucho mejores.

Importante saber:

Algunos diseñadores usan movimiento rápido del ojo Diseños basados ​​en conjunto con un fijo px unidad tamaño de fuente puesta en el html elemento. Esto se hace normalmente para que un cambio de tamaño de fuente en el html El elemento puede escalar en general el diseño hacia arriba o hacia abajo..

Recomiendo fuertemente esto, ya que anula el tamaño de fuente del html elemento hereda de la configuración del navegador del usuario. Por lo tanto, esto evita que la configuración tenga algún efecto y elimina la capacidad del usuario de optimizar para una mejor visualización..

Si desea cambiar el tamaño de fuente en la html elemento, hacerlo con una em o movimiento rápido del ojo El valor como el tamaño de la fuente raíz seguirá siendo un múltiplo de la configuración del tamaño de fuente del navegador del usuario..

Esto aún le permitirá escalar su diseño hacia arriba o hacia abajo cambiando su html tamaño de fuente del elemento, pero conservará el efecto de la configuración del navegador del usuario.

Por que usar em Unidades

El valor clave em La oferta de unidades es que permiten que los valores de tamaño se determinen por un tamaño de fuente diferente al de la fuente. html elemento.

Por esta razón, el propósito principal de em Las unidades deben ser para permitir la escalabilidad dentro del contexto de un elemento de diseño específico.

Por ejemplo, puede establecer la relleno, margen y altura de la línea alrededor de un elemento del menú de navegación para usar em valores.

Menú con tamaño de fuente 0.9rem

De esta manera, si cambia el tamaño de fuente del menú, el espaciado alrededor de los elementos del menú se escalará proporcionalmente, independientemente del resto del diseño..

Menú con tamaño de letra 1.2rem

En la sección anterior sobre la herencia, vio cuán rápido realizar el seguimiento de em Las unidades pueden salirse de control. Por este motivo, recomiendo solamente utilizando em Unidades si identificas una clara necesidad de ellas..

Aplicación práctica

Puede haber algún debate entre los diseñadores web y estoy seguro de que diferentes personas tienen diferentes enfoques preferidos, sin embargo, mi recomendación es la siguiente.

Utilizar em Unidades para:

Cualquier tamaño que debería escala en función del tamaño de fuente de un elemento distinto de la raíz.

En general, la única razón por la que necesitarás usar em Unidades es escalar un elemento que tiene un tamaño de fuente no predeterminado.

Según nuestro ejemplo anterior, los componentes de diseño como elementos de menú, botones y encabezados pueden tener sus propios tamaños de fuente explícitamente establecidos. Si cambia estos tamaños de fuente, desea que todo el componente se amplíe proporcionalmente.

Las propiedades comunes a las que se aplicará esta directriz son: margen, relleno, anchura, altura y altura de la línea configuración, cuando se utiliza en elementos con tamaño de fuente no predeterminado.

Recomiendo que cuando lo emplee. em unidades, el tamaño de fuente del elemento en el que se usan debe establecerse en movimiento rápido del ojo Unidades para preservar la escalabilidad pero evitar la confusión de herencia..

Normalmente no usar em Unidades para tamaños de fuente

Es bastante común ver em las unidades utilizadas para el tamaño de fuente, particularmente en los encabezados, sin embargo, sugeriría que los diseños son más manejables si movimiento rápido del ojo las unidades se utilizan normalmente para el tamaño de la fuente.

Los encabezados de la razón usan a menudo em unidades es que son una mejor opción que px Unidades, siendo relativas al tamaño del texto regular. sin embargo movimiento rápido del ojo Las unidades pueden lograr este objetivo igualmente bien. Si cualquier ajuste de tamaño de fuente en la html El elemento está hecho, los tamaños de los encabezados también se escalarán..

Intenta cambiar el em tamaño de letra en el html Elemento en este CodePen para ver por ti mismo:

La mayoría de las veces, no queremos que nuestros tamaños de fuente se amplíen en función de ningún elemento que no sea la raíz, con solo algunas excepciones..

Un ejemplo donde podríamos querer em el tamaño de fuente basado podría ser un menú desplegable, donde tenemos el tamaño del texto del elemento del menú de segundo nivel dependiendo del tamaño de fuente del primer nivel. Otro ejemplo podría ser un icono de fuente usado dentro de un botón, donde el tamaño del icono debe relacionarse con el tamaño del texto del botón..

Sin embargo, la mayoría de los elementos en un diseño web tienden a no tener este tipo de requisito, por lo que generalmente querrá usar movimiento rápido del ojo Unidades para tamaño de fuente, con em unidades solo donde se necesiten específicamente.

Utilizar movimiento rápido del ojo Unidades para:

Cualquier tamaño que no necesite em unidades por las razones descritas anteriormente, y que deben escala dependiendo de la configuración de tamaño de fuente del navegador.

Esto representa casi todo en un diseño estándar que incluye la mayoría de las alturas, la mayoría de los anchos, la mayoría del relleno, la mayoría de los márgenes, los anchos de los bordes, la mayoría de los tamaños de fuente, las sombras, básicamente casi todas las partes de su diseño.

En pocas palabras, todo lo que se puede hacer escalable con movimiento rápido del ojo unidades, debe ser.

Propina

Cuando se crean diseños, a menudo es más fácil pensar en píxeles pero generar resultados en movimiento rápido del ojo unidades.

Puedes tener pixel para movimiento rápido del ojo cálculos realizados automáticamente a través de un preprocesador como Stylus / Sass / Less, o un postprocesador como PostCSS con el complemento PXtoRem.

Alternativamente, puedes usar PXtoEM para hacer tus conversiones manualmente.

Siempre usa movimiento rápido del ojo Preguntas de los medios

Es importante destacar que, cuando se utiliza movimiento rápido del ojo unidades para crear un diseño escalable de manera uniforme, sus consultas de medios también deben estar en movimiento rápido del ojo unidades. Esto asegurará que sea cual sea el tamaño de fuente del navegador del usuario, sus consultas de medios responderán y ajustarán su diseño.

Por ejemplo, si un usuario amplía el texto muy alto, es posible que su diseño deba ajustarse de dos columnas a una sola columna, al igual que en un dispositivo móvil con pantalla más pequeño..

Si sus puntos de interrupción están en anchos de píxel fijos, solo un tamaño de vista diferente puede activarlos. Sin embargo con movimiento rápido del ojo puntos de interrupción basados ​​responderán a diferentes tamaños de fuente también.

No usar em o movimiento rápido del ojo Por:

Ancho de diseño de múltiples columnas

Los anchos de columna en un diseño normalmente deberían ser % Basados ​​para que puedan adaptarse de forma fluida a las vistas de tamaño impredecible.

Sin embargo, las columnas individuales todavía deben incorporar generalmente movimiento rápido del ojo valores a través de anchura máxima ajuste.

Por ejemplo:

css .container ancho: 100%; ancho máximo: 75rem;

Esto mantiene la columna flexible y escalable, pero evita que se vuelva demasiado ancha para que el texto en ella pueda leerse cómodamente..

Cuando un elemento debe ser estrictamente inescalable

En un diseño web típico, no habrá muchas partes de su diseño que no puedan diseñarse para la escalabilidad. Sin embargo, ocasionalmente encontrará elementos que realmente necesitan utilizar valores fijos explícitos con el fin de evitar el escalado..

La condición previa para emplear valores de tamaño fijos debe ser que si se escala el elemento en cuestión se rompa. Esto realmente no aparece con frecuencia, así que antes de que tengas la tentación de sacar esos px Unidades, pregúntate si usarlas es una necesidad absoluta..

Terminando

Hagamos un resumen rápido de lo que hemos cubierto:

• movimiento rápido del ojo y em las unidades se calculan en valores de píxeles mediante el navegador, según los tamaños de fuente en su diseño.
• em las unidades se basan en el tamaño de fuente del elemento que se utilizan en.
• movimiento rápido del ojo unidades se basan en el tamaño de fuente de la html elemento.
• em Las unidades pueden ser influenciadas por la herencia del tamaño de fuente de cualquier elemento padre

• movimiento rápido del ojo las unidades pueden verse influidas por la herencia del tamaño de fuente de la configuración de fuente del navegador.

• Utilizar em Unidades para el tamaño que deben escalarse en función del tamaño de fuente de un elemento distinto de la raíz..
• Utilizar movimiento rápido del ojo Unidades para dimensionar que no necesitan. em unidades, y eso debería escalar dependiendo de la configuración de tamaño de fuente del navegador.
• Utilizar movimiento rápido del ojo unidades a menos que esté seguro de que necesita em unidades, incluso en tamaños de fuente.
• Utilizar movimiento rápido del ojo unidades en consultas de medios
• No usar em o movimiento rápido del ojo en anchos de diseño de múltiples columnas - uso % en lugar.
• No usar em o movimiento rápido del ojo Si el escalado causaría inevitablemente que un elemento de diseño se rompa.

Espero que ahora hayas construido una imagen robusta y completa de cómo exactamente em y movimiento rápido del ojo Las unidades funcionan y, a través de eso, saben cómo aprovecharlas mejor en sus diseños..

Lo aliento a que pruebe las pautas de uso contenidas en este tutorial y disfrute de la escalabilidad y capacidad de respuesta de los diseños que le permitirán crear..