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.
body { font-size: XYZ; }
uso de una hoja de estilo de usuario conbody { font-size: ZYX !important; }