¿Por qué em en lugar de px?
Escuché que deberías definir tamaños y distancias en tu hoja de estilo en emlugar de en píxeles. Entonces la pregunta es ¿por qué debería usar emen lugar de pxal definir estilos en CSS? ¿Hay algún buen ejemplo que ilustre esto?
Es incorrecto decir que una es una mejor opción que la otra (o que a ambas no se les habría dado su propio propósito en la especificación). Incluso puede valer la pena señalar que Stack Overflow hace un uso extensivo de unidades px. No es la mala elección que sugiere la pregunta.
Definición de unidades
px es una unidad de medida absoluta (como in , pt o cm ) que también es 1/96 de una unidad in (más sobre por qué más adelante). Debido a que es una medida absoluta, puede usarse cada vez que desee definir algo como de un tamaño particular, en lugar de ser proporcional a algo más como el tamaño de la ventana del navegador o el tamaño de fuente.
Como todas las demás unidades absolutas, las unidades px no se escalan según el ancho de la ventana del navegador. Por lo tanto, si todo el diseño de su página utiliza unidades absolutas como px en lugar de % , no se adaptará al ancho del navegador. Esto no es intrínsecamente bueno o malo, simplemente es una elección que el diseñador debe tomar entre adherirse a un tamaño exacto y ser inflexible versus estirarse pero en el proceso no adherirse a un tamaño exacto. Sería típico que un sitio tuviera una combinación de objetos de tamaño fijo y flexible.
A menudo es necesario incorporar elementos de tamaño fijo en la página, como banners publicitarios, logotipos o iconos. Esto garantiza que casi siempre necesitarás al menos algunas medidas basadas en px en un diseño. Las imágenes, por ejemplo, se escalarán (de forma predeterminada) de modo que cada píxel tenga un tamaño de 1 px , por lo que si está diseñando alrededor de una imagen, necesitará unidades de px . También es muy útil para dimensionar fuentes con precisión y para anchos de bordes, donde debido al redondeo tiene más sentido usar unidades px para la mayoría de las pantallas.
Todas las medidas absolutas están rígidamente relacionadas entre sí; es decir, 1in es siempre 96px , al igual que 1in es siempre 72pt . (Tenga en cuenta que 1 pulgada casi nunca es una pulgada física cuando se habla de medios basados en pantalla). Todas las mediciones absolutas asumen una resolución de pantalla nominal de 96ppi y una distancia de visualización nominal de un monitor de escritorio, y en dicha pantalla un px será igual a un píxel físico en la pantalla y una pulgada será igual a 96 píxeles físicos. En pantallas que difieren significativamente en la densidad de píxeles o la distancia de visualización, o si el usuario ha ampliado la página utilizando la función de zoom del navegador, los px ya no necesariamente se relacionarán con píxeles físicos.
em no es una unidad absoluta, es una unidad relativa al tamaño de fuente elegido actualmente. A menos que haya anulado el estilo de fuente configurando su tamaño de fuente con una unidad absoluta (como px o pt ), esto se verá afectado por la elección de fuentes en el navegador o sistema operativo del usuario si ha creado una, por lo que no hace Tiene sentido utilizar em como unidad general de longitud, excepto cuando desee específicamente que se escale a medida que aumenta el tamaño de la fuente.
Úselos cuando desee específicamente que el tamaño de algo dependa del tamaño de fuente actual .
rem es como em , pero es relativo al tamaño de fuente base del documento (específicamente, del elemento raíz), en lugar del tamaño de fuente dado al elemento actual.
% también es una unidad relativa, en este caso, relativa a la altura o al ancho de un elemento principal. Son una buena alternativa a las unidades px para cosas como el ancho total de un diseño si su diseño no depende de tamaños de píxeles específicos para establecer su tamaño.
El uso de unidades % en su diseño permite que su diseño se adapte al ancho de la pantalla/dispositivo, mientras que el uso de una unidad absoluta como px no lo hace.
vh , vw , vmin y vmax son unidades relativas como % , pero son relativas al tamaño de la ventana gráfica (tamaño del área visible de la ventana) en lugar del elemento principal. Respectivamente, son relativos a la altura y el ancho de la ventana gráfica, el menor de los dos y el mayor de los dos.
Tengo una computadora portátil pequeña con alta resolución y tengo que ejecutar Firefox con un zoom de texto del 120% para poder leer sin entrecerrar los ojos.
Muchos sitios tienen problemas con esto. El diseño se vuelve confuso, el texto de los botones se corta a la mitad o desaparece por completo. Incluso stackoverflow.com lo sufre:
Observe cómo se superponen los botones superiores y las pestañas de las páginas. Si hubieran usado unidades em en lugar de px, no habría habido ningún problema.
La razón por la que hice esta pregunta fue que olvidé cómo usarlos ya que estuve pirateando felizmente CSS durante un tiempo. La gente no se dio cuenta de que mantuve la pregunta en general ya que no estaba hablando del tamaño de las fuentes en sí. Estaba más interesado en cómo definir estilos en cualquier elemento de bloque de la página.
Como señalaron Henrik Paul y otros, em es proporcional al tamaño de fuente utilizado en el elemento. Es una práctica común definir tamaños en elementos de bloque en px; sin embargo, aumentar el tamaño de las fuentes en los navegadores generalmente rompe este diseño. El cambio de tamaño de las fuentes se realiza comúnmente con las teclas de método abreviado Ctrl+ +o Ctrl+ -. Entonces, una buena práctica es usar em en su lugar.
Usando px para definir el ancho
A continuación se muestra un ejemplo ilustrativo. Digamos que tenemos una etiqueta div que queremos convertir en un elegante cuadro de fecha, es posible que tengamos un código HTML similar a este:
<div class="date-box">
<p class="month">July</p>
<p class="day">4</p>
</div>
Una implementación simple definiría el ancho de la date-boxclase en px:
* { margin: 0; padding: 0; }
p.month { font-size: 10pt; }
p.day { font-size: 24pt; font-weight: bold; }
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 50px;
}
El problema
Sin embargo, si queremos aumentar el tamaño del texto en nuestro navegador, el diseño se romperá. El texto también sangrará fuera del cuadro, que es casi lo mismo que sucede con el diseño de SO, como señala flodin . Esto se debe a que el cuadro seguirá teniendo el mismo tamaño de ancho que el que está bloqueado 50px.
Usarlos en su lugar
Una forma más inteligente es definir el ancho en ems:
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 2.5em;
}
* { margin: 0; padding: 0; font-size: 10pt; }
// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt
De esa manera, tendrá un diseño fluido en el cuadro de fecha, es decir, el tamaño del cuadro aumentará junto con el texto en proporción al tamaño de fuente definido para el cuadro de fecha. En este ejemplo, el tamaño de fuente se define *como 10 puntos y aumentará 2,5 veces ese tamaño de fuente. Entonces, cuando cambies el tamaño de las fuentes en el navegador, el cuadro tendrá 2,5 veces el tamaño de ese tamaño de fuente.