El diseño responsivo es un concepto que ha evolucionado en los últimos años. Antes de la aparición de los dispositivos móviles el diseño de una página web se basaba en maquetar un sitio que pudiese visualizarse en cualquier computador del momento (en aquel entonces no era una tarea tan complicada, ya que las resoluciones no variaban demasiado).

Debido a que en aquel entonces no existían los dispositivos celulares, los diseños solían ser escritos con medidas absolutas. Es un hecho que en la actualidad la gran mayoría de visitas que recibe un sitio web viene de un dispositivo móvil. Es por eso que cada vez son más comunes las aplicaciones web y más empresas migran sus sistemas al ambiente web.

Con el paso de los años el lenguaje CSS ha mejorado notoriamente, implementando nuevas características que permiten a los usuarios estilar sitios responsivos de una manera más sencilla y rápida.

En este artículo usted podrá explorar algunas de las técnicas de diseño responsivo que ofrece CSS.

Unidades relativas

Las unidades relativas son aquellas que varian de acuerdo con un factor específico.

Unidad	Símbolo	Descripción
Porcentaje	%	Toma un porcentaje específico del tamaño del elemento padre..
Viewport Height	vh	Es relativo al alto del viewport.
Viewport Width	vw	Es relativo al ancho del viewport.
Em	em	Es relativa al tamaño de la propiedad font-size definido en el elemento padre.
Root-em	rem	Es relativa al tamaño de la propiedad font-size del elemento raíz (etiqueta html).

Yo estoy diseñado con 10 em

Yo estoy diseñado con 10 rem

Las reglas en CSS

CSS permite al usuario definir lo que se conoce como reglas. Estas, también conocidas como at-rules, permiten establecer un grupo de estilos de acuerdo un contexto específico

Existen varios tipos de reglas en CSS, pero en este artículo mencionaremos @media. Si después de estudiar esta regla desea aprender más, puede investigar acerca de la regla @component.

Media queries

Las media queries son uno de los pilares básicos del diseño responsivo con CSS. Como se mencionó anteriormente, las reglas trabajan bajo un contexto. Existen muchos casos de uso para la regla @media, pero suelen ser utilizadas más frecuentemente con el ancho de la pantalla.

Ejemplo de uso

Con las media queries casi siempre vamos a estilar de acuerdo con el width del viewport. Para especificar el contexto bajo el que la media query funcionará, antiguamente existían min-width y max-width.

min-width especifica a partir de cual medida de ancho la media query se activará (si no se define se interpreta como cualquier ancho).
max-width especifica hasta cual medida de ancho la media query se activará.


                        @media (min-width: 768px) { 

                             estilos CSS...

                        }

Nótese que siempre se especifica una unidad a la medida, como pixeles.

Sintaxis moderna para Media Queries

El CSS moderno trae consigo una nueva forma más sencilla de trabajar con las medidas, se utiliza algo muy similar a lo que es un lenguaje de programación.


                        @media (width >= 768px) { 

                             estilos CSS...

                        }

Breakpoints

Seguramente usted se pregunte, ¿por qué se usa precisamente 768px? Esta incógnita se responde con los breakpoints.

Los breakpoints son medidas estándar que usted puede utilizar para definir sus reglas media.

768px o más: se utiliza para tablets.
992px o más: se utiliza para equipos de escritorio.

Nota: usted puede agregar más breakpoints de acuerdo a las necesidades de su proyecto.

Mobile-First

Probablemente haya notado que no mencionamos una medida de pixeles en específico para teléfonos celulares. Esto es porque es buena práctica trabajar enfocados a diseñar para mobile en primera instancia, y después adaptarlo a tablets o desktops de acuerdo con la necesidad del proyecto.

Si usted utiliza los breakpoints que mencionamos anteriormente, 768px en adelante representarán tablets pero 992px en adelante será diseño para equipos de escritorio. Y el resto de diseño que no se encuentra en media queries, será tomado para el diseño mobile.

WRD