¿Siguen siendo relevantes los ems?

Según entiendo al leer hilos como este, el objetivo de ems es definir todas las medidas en su página web, por el tamaño de fuente base , que puede establecer su navegador.

Por ejemplo, en Chrome puedes hacer esto yendo settings -> show advanced settings -> web content -> font size: very large. Podría hacer esto si estuviera usando un monitor grande de alta resolución, que estaba muy lejos.

Creé un plunker que demuestra la diferencia entre ems y px en el tamaño.

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

Si en mi navegador configuro el tamaño de fuente en medio, estos divs serán del mismo tamaño, el tamaño de fuente base será de 16px, entonces 20em = 320px.

Sin embargo, cuando cambio el tamaño de fuente de mi navegador a muy grande, podemos ver que el div medido en ems ha aumentado de tamaño.

Sin embargo, este efecto se negará si defino el tamaño de fuente en la etiqueta del cuerpo, por ejemplo.

body {
  font-size: 16px;
}

Porque ahora mi CSS está anulando el tamaño de fuente establecido por el navegador.

Entiendo que ems habría sido importante en los días de los navegadores más antiguos, donde hacer zoom en la página solo aumentaría las fuentes. Pero en la actualidad, los navegadores modernos amplían los píxeles y las fuentes, lo que hace que el problema del zoom sea discutible.

Mirando alrededor de la web - una gran cantidad de sitios web hacer conjunto tamaño de la fuente en su cuerpo de la etiqueta.

Stack Overflow, por ejemplo, establece el tamaño de fuente en 13px en la etiqueta del cuerpo. Establecer el tamaño de fuente en mi navegador no afecta el diseño de Stack Overflow en lo más mínimo.

Los resultados de búsqueda de Google no hacen esto.

(ambas capturas de pantalla tomadas con el tamaño de fuente de Chrome establecido en muy grande y con un zoom del 100%).

Entonces, tal vez podría argumentar que establecer el tamaño de fuente en la etiqueta del cuerpo es una mala idea porque impide la configuración de accesibilidad del usuario. Pero dado que el usuario puede hacer zoom para aumentar los tamaños (que también aumentará proporcionalmente todos los píxeles), esto no parece ser un problema real.

Sin embargo, este efecto se negará si defino el tamaño de fuente en la etiqueta del cuerpo, por ejemplo.

body {
  font-size: 16px;
}

Porque ahora mi CSS está anulando el tamaño de fuente establecido por el navegador.

Te estás olvidando de la accesibilidad .

Consulte C14: Uso de unidades em para tamaños de fuente de las Pautas de accesibilidad al contenido web (WCAG 2.0).

Establezca la opción de tamaño de fuente de su navegador en Muy grande . Ahora ve a un sitio web como W3C . ¿Cómo se ve el texto?

De esto se trata esta opción. Los desarrolladores de StackExchange y muchos otros sitios web decidieron que sus elecciones son más importantes que las elecciones de los usuarios que pueden tener una discapacidad visual. Si esta elección es correcta o incorrecta está fuera del alcance de esta pregunta, y la respuesta no es necesariamente clara.

Sin embargo, usted puede verse obligado (incluso por ley para algunos sitios web) a tomar decisiones diferentes y permitir que los usuarios seleccionen su tamaño de fuente. A partir de ahí, tiene una opción: especificar el tamaño de las imágenes y las diferentes zonas de la página en píxeles, en cuyo caso la opción de tamaño de fuente del navegador tendrá efectos divertidos en el diseño, o utilizará empara esos elementos como bien.

También tenga en cuenta que si no especifica el tamaño de fuente en píxeles a nivel del cuerpo, entonces adhiérase emal menos al tamaño de fuente en todas partes. Por ejemplo, Google especificó el tamaño de fuente de manera inconsistente, y su página de búsqueda parece extraña, especialmente con títulos que parecen más pequeños que el texto normal. Wikipedia, por otro lado, hizo un excelente trabajo al usar emcada vez que se especificó el tamaño de fuente. A continuación se muestran las capturas de pantalla de ambos sitios representados por Chromium con la opción de tamaño de fuente establecida en Muy grande :

Entonces, tal vez podría argumentar que establecer el tamaño de fuente en la etiqueta del cuerpo es una mala idea porque impide la configuración de accesibilidad del usuario. Pero dado que el usuario puede hacer zoom para aumentar los tamaños (que también aumentará proporcionalmente todos los píxeles), esto no parece ser un problema real.

Este es un problema real por dos razones.

Primero, la mayoría de los navegadores almacenan el factor de zoom sitio por sitio. Si tiene una discapacidad visual, se verá obligado a hacer zoom, una y otra vez, en cada sitio que visite. Eso apesta. Dada la actual indiferencia de los diseñadores y desarrolladores web hacia la accesibilidad, las personas con discapacidad visual tienen que hacerlo de todos modos, pero esto no significa que deba seguir así.

En segundo lugar, demasiados sitios web tampoco se comportarán bien visualmente al hacer zoom. Los sitios web receptivos funcionan bien, pero los que no responden exhibirán desplazamiento horizontal o algún tipo de comportamiento de "su pantalla es demasiado pequeña".

También hay una diferencia fundamental entre el zoom y la escala de texto para un desarrollador. Si bien emsignifica "ajustar eso a las preferencias de tamaño de texto del usuario", el zoom se trata de escalar toda la página hacia arriba o hacia abajo, no solo el texto.

Tome un ejemplo del menú del sitio (en la parte superior de la página, con los enlaces posicionados en una línea). Con el zoom, sabe que la altura del menú cambiará proporcionalmente a los demás elementos. Con la opción de tamaño de texto, depende de usted determinar el comportamiento. Puede suponer que una persona con discapacidad visual podrá ver su 50pxmenú de altura en todos los casos: nadie se perderá un menú negro sobre fondo blanco. O puede decidir que su altura debe mantenerse proporcional al texto, por ejemplo 1.5em.

el punto de ems es definir todas las medidas en su página web, por el tamaño de fuente base

Esto puede ser un malentendido de términos por mi parte, pero para aclarar: emes relativo al tamaño de fuente del "elemento actual". remes relativo al tamaño de fuente raíz.

Entiendo que ems habría sido importante en los días de los navegadores más antiguos, donde hacer zoom en la página solo aumentaría las fuentes.

No es por eso que uso em's. De hecho, su experiencia de acercamiento es lo último en lo que pienso cuando uso unidades de medida relativas. Mi preocupación es doble.

En primer lugar, normalmente estoy interesado en simplemente definir mis diseños en términos relativos. Mi preocupación es que mis contenedores se vean bien entre sí y con el texto dentro de ellos. Y cuando cambio la fuente o modifico las cosas en la cadena, no quiero volver a calcular y actualizar todo a mano para mantener las proporciones que estoy buscando. Deje que el navegador haga los cálculos ...

En segundo lugar, solo quiero expresar los tamaños de fuente en términos simples que pueda entender. Si expreso mis fuentes base en pt's y todo lo demás en rem' s o em's, es más fácil para mí. No tengo que saber la resolución de tu dispositivo, y no tienes que hacer zoom. Su navegador sabe cuántos píxeles usar; ninguno de nosotros debería tener que pensarlo.