Lo bueno del em es que podemos usarlo como unidad de medida casi en cualquier propiedad css. Pongamos que tenemos la típica lista de thumbs que van a contener miniaturas de diversas fotos de las que no conocemos sus dimensiones. Lo más fácil seria seria darles a todas las imágenes un ancho del 100%, damos un ancho del <li> en porcentaje y dejar que el alto del <li> se ajustara solo al escalarse la imagen, pero como cada imagen tendrá una relación ancho/alto distinta, nos formara escalones que descuadran la retícula. ¿como podemos poner un alto “fijo” relativo al ancho?
(El tema de encajar la imagen lo resolveríamos poniéndola como position:absolute ( y overflow hidden al <li>), o como a mi me gusta, usandola de background del <li>y tirando de background-size:cover)
No podemos usar altos en porcentaje, porque son muy problemáticos, y exigen que esté definidos todos los altos de todos los padres donde se localice hasta llegar en la jerarquia del DOM a HTML. Los anchos en porcentaje funcionan, los altos no.
Podríamos usar el ancho de ventana (vw) como referencia (li{ height:20vw}, por ejemplo), con limitadores media query por arriba y por abajo, pero vw exige ser limitada cada vez que se utilice para evitar los problemas que comentaba en la primera parte.
Podriamos usar una imagen “dumb”, un gif transparente vacio con las proporciones que queramos, pero es una solucion un poco sucia, y con ello solo podemos escalar el alto del <li> (o <div> o lo que sea) que la contenga.
Recordemos que em es una referencia (ojo, acumulable y relativa, como comento al final del articulo anterior) al tamaño del texto definido en el <body>, y como lo hemos definido tal que así:
body {
font-size: 3.2vw;
line-height:1.2;
}
@media (max-width: 360px) {
body {font-size:10px}
}
@media (min-width: 800px){
body {font-size: 25px}
}
Estamos definiendo que em valga:
• 10px hasta 360px de ancho de ventana.
• El 0.032% del ancho de ventana hasta 800px de ancho de ventana (con una ventana de 480px, em valdria 15.36px).
• 25px en adelante.
Volvamos al principio, recordemos que esto era para solucionar el alto de los <li>, una vez definido lo anterior, podemos ajustar el alto de los<li>s asi:
li{ width: 20em; height: 1.5em}
Y tendremos una web que escala los contenidos correctamente sin más complicación.
Lo suyo seria poner el media query limitador “por arriba” en la misma medida que el max-width del contenedor padre que tenga la web o del <ul> que tenga los thumbs.
Esta forma de trabajar no es la panacea, y tiene sus propios inconvenientes, pero es otra herramienta más que tenemos a nuestra disposición para resolver problemas que nos puedan surgir.
Y en fin, solo recordar que con CSS siempre hay mil formas de hacer las cosas y elegir una u otra solo depende del caso concreto, del target de la web o al final, del gusto personal.