Toda página web es responsive de manera natural, nosotros al trabajar los diseños y los estilos CSS vamos bloqueando esta capacidad nativa con tamaños, medidas y posiciones rígidos que hacen que las páginas web dejen de ser adaptables.
Si a un archivo HTML simple, con varios párrafos, algunos encabezados, se abren en un navegador y se comienza a reducir el tamaño de la ventana, se observará que la página web se adapta sin haber escrito una sola línea de CSS o un Media Query.
La rigidez al momento de crear los estilos CSS para nuestras páginas proviene de la aplicación de tamaños fijos a los elementos y también en parte del uso de una unidad de medida rígida: los pixeles.
Al usar pixeles para definir las dimensiones de los objetos y los estilos de fuente no solo estamos definiendo tamaños rígidos, sino que también estamos ignorando las configuraciones que cada usuario pueda tener en su navegador.
Unidades de medida recomendadas
Se puede apreciar el por qué no es una buena idea usar los pixeles como unidad de medida para el diseño web pero entonces ¿Cuál es la alternativa?
Hay 3 unidades de medida en CSS que son las que se deberían usar en el diseño web actual:
- Porcentajes
- Rem
- Em
Porcentajes
La unidad de medida porcentual es la que se usa por defecto en los elementos HTML en donde de manera predeterminada cada elemento de bloque usa un ancho del 100%, es por eso que cuando achicamos la ventana del navegador con una página que no tenga estilos, la página se adapta, ya que siempre usará el ancho total visible.
Em
Las unidades em no han sido creadas por CSS, sino que llevan décadas utilizándose en el campo de la tipografía. Aunque no es una definición exacta, la unidad 1em equivale a la anchura de la letra M («eme mayúscula») del tipo y tamaño de letra del elemento.
Es decir, si en elemento tiene aplicado un tamaño de fuente de 16 pixeles, entonces 1 em será igual a 16px (los navegadores de manera predeterminada definen un font-size de 16px al elemento HTML, por lo tanto, por defecto 1em es igual a 16px).
La unidad em es escalable y siempre depende de su elemento padre.
Rem
La unidad de medida rem depende del elemento raíz del documento, el elemento HTML. Rem significa “Root Em“, o sea, es un em basado en la raíz.
Esto significa que si el elemento HTML tiene un tamaño de fuente de 16px (como es por defecto), entonces 1rem, sería igual a 16px, y si queremos aplicar un tamaño basado en rem a cualquier elemento de la página, no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que 1 rem siempre será igual a 16 pixeles a no ser que se modifique el elemento raíz.
Usar rem nos permite cierta estructura para poder definir ciertas partes del layout, pero al mismo tiempo nos entrega cierta escalabilidad para respetar las configuraciones de cada usuario.
Esta unidad de medida es recomendable para aplicar a elementos del layout que requieran medidas fijas y eventualmente también para textos que deseemos que tengan un tamaño de fuente que no dependa de su elemento padre.