Responsive - Curso de maquetación web

Responsive design

"...Filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visitarlas y sus características concretas: tamaño de pantalla, resolución, potencia de CPU, sistema operativo o capacidad de memoria entre otras. Esta tecnología pretende que con un único diseño web, todo se vea correctamente en cualquier dispositivo..."

El media query

Consiste en una expresión que resuelve en true or false las reglas de estilo que lleva:

Si el media type especificado coincide con el tipo de dispositivo desde donde se está visualizando se evalua a 'true'. Por tanto se aplicarán las reglas de estilo para ese dispositivo. Si no lo es, se aplicarán otras por defecto.

braille
embossed
handheld
print
projection
screen
speech
tty
tv

El media type "all" también puede ser usado para indicar que las hojas de estilo apliquen todos los media types.

@media

Mediante la función con la palabra reservada @media declaramos las reglas. Observa que la estructura es muy similar a cualquier función. En lugar de pasarle parámetros, le pasamos el punto de ruptura a partir del cual han de cumplirse las reglas que establezcamos. Entre las llaves declaramos las reglas CSS para la condición.

@media (condición: punto de ruptura)  {
    propiedad: valor;
    propiedad: valor;
}

ejemplo práctico

Observa el comportamiento del siguiente ejemplo reduciendo el tamaño de la ventana del navegador. Si pulsas F12 para inspeccionar el código con el DevTools, verás como cambian los valores de ancho del div padre de las cajas, y cómo éstas se adaptan al espacio disponible.

cajita 1

cajita 2

cajita 3

cajita 4

cajita 5

cajita 6

cajita 7

cajita 8

Este sería el código del ejemplo, en él puedes ver declarados los puntos de ruptura. Yo he utilizado la regla '@media' y directamente la condición, que es equivalente a especificar la regla para todos los mediatypes (all).

Bootstrap

Este framework para el frontend trae muchas utilidades, fundamentalmente CSS, que nos sirven para dotar al layout de un comportamiento responsive.

Principales ventajas y utilidades de Bootstrap:

Sistema de cuadrilla y diseño sensible

Bootstrap viene con una disposición de cuadrilla estándar de 940 píxeles de ancho. Alternativamente, el desarrollador puede usar un diseño de ancho-variable. Para ambos casos, la herramienta tiene cuatro variaciones para hacer uso de distintas resoluciones y tipos de dispositivos: teléfonos móviles, formato de retrato y paisaje, tabletas y computadoras con baja y alta resolución (pantalla ancha). Esto ajusta el ancho de las columnas automáticamente.
Comprensión de la hoja de estilo CSS

Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas de estilo para todos los componentes de HTML. Esto otorga una uniformidad al navegador y al sistema de anchura, da una apariencia moderna para el formateo de los elementos de texto, tablas y formularios.
Componentes re-utilizables

Además de los elementos regulares de HTML, Bootstrap contiene otra interfaz de elementos comúnmente usados. Ésta incluye botones con características avanzadas (e.g grupo de botones o botones con opción de menú desplegable, listas de navegación, etiquetas horizontales y verticales, ruta de navegación, paginación, etc.), etiquetas, capacidades avanzadas de miniaturas tipográficas, formatos para mensajes de alerta y barras de progreso.
Plug-ins de JavaScript

Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de JavaScript. Los plug-ins se encuentran en la herramienta de plug-in de jQuery. Proveen elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles. También extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo una función de auto-completar para campos de entrada (input). La versión 2.0 soporta los siguientes plug-ins de JavaScript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel y Typeahead.

	Dispositivos muy pequeños Teléfonos (<768px)	Dispositivos pequeños Tablets (≥768px)	Dispositivos medianos Ordenadores (≥992px)	Dispositivos grandes Ordenadores (≥1200px)
Comportamiento	Las columnas se muestran siempre horizontalmente.	Si se estrecha el navegador, las columnas se muestran verticalmente. A medida que aumenta su anchura, la rejilla muestra su aspecto horizontal normal.
Anchura máxima del contenedor	Ninguna (`auto`)	`728px`	`940px`	`1170px`
Prefijo de las clases CSS	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Número de columnas	12
Anchura máxima de columna	`auto`	`60px`	`78px`	`95px`
Separación entre columnas	`30px` (`15px` a cada lado de la columna)
¿Permite anidación?	Si
¿Permite desplazar columnas?	No	Si
¿Permite reordenación de columnas?	No	Si

El sistema de cuadrícula Bootstrap en la versión 4 tiene cinco clases:

.col- (dispositivos extra pequeños - ancho de pantalla inferior a 576 px)
.col-sm- (dispositivos pequeños: ancho de pantalla igual o superior a 576 px)
.col-md- (dispositivos medianos: ancho de pantalla igual o superior a 768 px)
.col-lg- (dispositivos grandes: ancho de pantalla igual o superior a 992 px)
.col-xl- (dispositivos xlarge: ancho de pantalla igual o superior a 1200px)

Las clases anteriores se pueden combinar para crear diseños más dinámicos y flexibles.

Breakpoints in SASS

En el caso de SASS podemos usar las funciones que ofrece, concretamente los 'mixins' para definir los puntos de ruptura de cada tamaño de dispositivo y luego usarlos en las hojas de estilo. En estas tres imágenes se construye así:

Se definen en la hoja 'variables' los puntos de ruptura en px que corresponden a las medidas de anchura de cada dispositivo. Como ves estos puntos de ruptura son personalizables y diferentes a los que vienen definidos en Bootstrap.
En otra hoja SCSS que podría llamarse 'breakpoints.scss' se definen los mixins con el nombre 'media-breakpoint' y dependiendo de si el punto de ruptura establece un mínimo o un máximo, definir 'media-breakpoint-down' o 'media-breakpoint-up' para usarlos posteriormente a conveniencia.
El uso posterior en una hoja de estilos para aplicarlo a un elemento requiere de la función '@include' seguido del nombre del mixin (media-breakpoint-down) y se le pasa como parametro la variable que lleva el punto de ruptura.

*Al final el resultado compilado es una regla CSS @media para el rango de anchura máxima o mínima definida por los puntos de ruptura.