Aunque ya hemos hablado mucho sobre diseño responsive, este nuevo estándar del desarrollo web no sólo está modificando la manera de planificar la creación de tu web o para crear tu tienda online, también sus fundamentos más prácticos.
En este artículo, hablaremos de las diferentes unidades de medida recomendadas a la hora de facilitar el desarrollo de sitios adaptables.
Unidades em
em se corresponde con la medida actual de la fuente en un contenedor. Es decir, si hemos cambiado el tamaño de la fuente en un elemento y asignado font-size: 20px, entonces dentro de ese contenedor, 1em será igual a 20px.
El tamaño de fuente predeterminado en el navegador es normalmente por defecto de 16px, por lo que, si no lo has alterado en algún lugar de tu CSS, 1em equivale a 16px. Aunque hay que tomarlo sólo como referencia, ya que ese tamaño es algo propio del navegador y podría cambiar entre navegadores, dispositivos, versiones, modelos, sistemas operativos o configuraciones del propio usuario.
Unidades rem
rem es la unidad relativa al tamaño de la fuente, pero teniendo en cuenta el tamaño de la fuente del elemento HTML y no la heredada del elemento donde se encuentre ni la definida. Conviene subrayar que hay navegadores antiguos que no son compatibles con rem.
Esta unidad es una magnífica forma de definir los tamaños de las fuentes, pues es más fácil de organizar y evita sorpresas al usar em, ya que rem siempre tendrá en cuenta una única medida para calcular el tamaño final de la fuente.
Unidades vw y vh
De reciente aparición en el estándar CSS, se corresponden con las siglas viewport width para vh y viewport height para vh, o lo que es lo mismo: la anchura y la altura de la pantalla del dispositivo. No corresponden exactamente con las dimensiones reales, puesto que en ocasiones el viewport puede falsear los datos y el dispositivo puede tener unas dimensiones distintas de pantalla.
Son unidades relativas, aunque en este caso lo son en relación con la pantalla del dispositivo. 1vw correspondería a la centésima parte de la anchura del viewport del dispositivo, por lo que 100vw sería la total. Algo parecido ocurriría con la vertical vh.
Esto es útil para que un elemento ocupe toda la altura de la pantalla del dispositivo, pero sabemos que un height: 100% no funciona de una forma deseable en la mayoría de los casos. Para que lo haga, podríamos usar vh como unidad, de la siguiente forma, aunque hay que tener en cuenta de que no funciona en pantallas de ordenadores y deberás aplicar estilos alternativos.
.lateral{
width: 200px;
height: 100vh;
background-color: #4ff;
}
¿Fijas o relativas, cuáles son las mejores unidades CSS?
Con el desarrollo responsive y la dificultad de conocer previamente las dimensiones exactas de la pantalla, lo más habitual sería usar unidades de medida relativas. Pero no hay una respuesta única para esto y deberemos conocer las características de cada una para saber cuál usar para lo que conviene tener en cuenta lo siguiente:
- Al definir un elemento que forme parte de un layout se usarán unidades relativas. Con esto, conseguiremos que estos se adapten y se distribuyan correctamente al agrandar o disminuir las dimensiones del navegador. Todo esto es en lo que se refiere a la anchura, ya que la altura es calculada en función del contenido que haya que colocar en los contenedores.
- En fuentes, la recomendación es trabajar con unidades relativas, de este modo los tamaños se adaptarán al elemento de origen y será muy sencillo cambiando el valor del elemento BODY o HTML.
- Nos puede interesar utilizar unidades fijas para algunos elementos concretos. Por ejemplo, imágenes que quizás no deseamos que se estiren o se encojan dependiendo de la pantalla, columnas que deben tener siempre unas mismas dimensiones fijas, elementos de interfaz gráfica que no deseamos que alteren su forma, etc.