¿Por qué Ems? | Programar Plus

Tengo texto de tamaño largo solo en px. Incluso cuando era evidentemente poco atractivo hacerlo, los días en los que a las personas inteligentes les importaba el hecho de que el texto configurado en px no se podía cambiar de tamaño en IE 6-8. Ahora pasé a usar ems. No he cambiado todos los proyectos todavía, pero mi mente ha cambiado. ¿Por qué? Finalmente encontré algunas razones convincentes por las que ahora asimilo.

Necesitará cambiar los tamaños de fuente para diferentes tamaños de pantalla

El tipo de cuerpo del mismo tamaño que se ve bien en una pantalla del tamaño de un teléfono no se ve bien en un diseño de escritorio ampliado. Mire el sitio de Trent para ver un buen ejemplo de esto. El texto debe ser un poco más grande en pantallas grandes.

Digamos que revisa su hoja de estilo y encuentra 50 diferentes font-size declaraciones en px. Eso es 50 lugares en los que necesita cambiar ese tamaño de fuente a través de una consulta de medios cuando cambia el tamaño de la pantalla. Eso es 50 puntos de succión.

En primer lugar, 50 lugares son demasiados para todos, excepto para los sitios web más enormes. Pero digamos que esos 50 lugares estaban todos en em. Ahora, a través de las consultas de medios, solo necesita cambiar el tamaño de fuente en el cuerpo y ese cambio se producirá en cascada a lo largo del documento y ajustará los tamaños en consecuencia.

body {
  font-size: x-large;
}
@media (max-width: 1000px) {
  body { font-size: large; }
}
@media (max-width: 500px) {
  body { font-size: medium; }
}

Es arbitrario de todos modos

Los dispositivos intentan normalizar el tamaño físico de “1px” a pesar de su densidad de pantalla. Que cosa graciosa. Un píxel no tiene nada que ver con un píxel real en su pantalla. En realidad, es una medida angular.

Es posible que se sienta más cómodo dimensionando en px porque lo ha hecho por más tiempo, pero eso no lo hace más intuitivo. Está eligiendo un valor que se ve bien en la pantalla. ¿Qué importa si es 1.35 o 17?

Espacio relativo

Supongamos que va a utilizar iconos de imagen en su diseño. Desea aplicarlos a los encabezados a voluntad. Desea que el tamaño de esos íconos sea acorde con el tamaño del encabezado. No puedes reservar espacio como padding-left: 20px, porque siempre será de 20 px independientemente del tamaño de fuente del encabezado. Si configura ese relleno en ems, puede reservar una cantidad de espacio en relación con el actual font-size de ese encabezado.

Relaciones

Si va todo adentro con ems, puede comenzar a configurar cosas como margin y padding con ems. Eso significa que cuando le pones una muesca a ese cuerpo font-size hacia abajo, el espacio alrededor de su sitio también se reduce. Esto vincula el diseño de su sitio a la tipografía, que es una de las principales acciones de sinergia del ying / yang.

Blahs menores

Todavía hay algunas cosas desagradables con ems, como la cascada. Si decide que los elementos de la lista deben font-size: 1.1em y luego tener listas anidadas, se conectará en cascada y aumentará el tamaño de fuente de las listas secundarias. Probablemente no querías eso. Puedes arreglarlo con li li { font-size: 1em; } pero ese es el tipo de cosas que pueden moler tu calabaza. Ahí es donde pueden entrar los rem, pero eso también puede ser complicado ya que hay menos compatibilidad con el navegador (IE 9+).