El diseño responsive

La adaptación de una página web a los diferentes tamaños de pantalla de dispositivos (pc, tablet, smartphone) es fundamental para su correcta visualización. El diseño responsive significa que los elementos se "reacomodarán" al ancho, alto y resolución del viewport o pantalla del usuario. Esto se logra fundamentalmente dándole propiedades flexibles y también indicando cuándo tomarán ciertas características dependiendo de la resolución en que se vean.

Propiedades flexibles

En los elementos, una de las principales cualidades es su alto y su ancho. Estos pueden darse predeterminadamente o especificándolos en el código CSS (estilos), para lo cual se utilizan medidas. La más básica de ellas son los píxeles, que reemplazarían al sistema métrico de la realidad (milímetros, centímetros, etc). Sin embargo este tipo de referencia no es flexible (adaptable), ya que el elemento mantendrá su tamaño independientemente del de pantalla, y si ésta tiene una resolución menor, los elementos la exederán. Para el diseño responsive lo que su utiliza son porcentajes, entre otras variables, lo que hace que refieran directamente al tamaño del dispositivo, sobre todo en el ancho.


En el último tiempo dos módulos (conjunto de propiedades) de CSS fueron desarrollados para ayudar en el diseño responsive, primero Flexbox y luego Grid. Ambos poseen propiedades y códigos específicos para establecer en los elementos, pero se escriben en conjunto con las anteriores propiedades de CSS. Su poder radica no solo en adaptar los altos y anchos de los elementos, sino también en reubicarlos, sea en filas o columnas según se quiera que funcionen en las diferentes resoluciones y proporciones.


Media query

Las media queries (consulta de medios) son un módulo de CSS que consiste básicamente en declarar (escribir) una orden y que si se cumple se apliquen las propiedades que engloba. Funciona especificando la resolución de pantalla e indicando en qué elementos aplicar las propiedades que se quieran.