No se puede imaginar el desarrollo web moderno sin diseños adaptativos o responsivos. Permite a los usuarios utilizar recursos web de igual manera en cualquier dispositivo: un teléfono inteligente, una tableta, una computadora de escritorio o un televisor.

¿Cómo funciona?

1. El equipo de desarrollo define cómo se verá cada elemento según el tamaño de la pantalla;
2. Se establecen las instrucciones necesarias en el código;
3. El navegador monitorea los cambios en el viewport;
4. El navegador aplica las reglas que el equipo de desarrollo ha definido en el código.

Media-queries

Media-query es lo que hace posible los diseños adaptativos/responsivos. Con la ayuda de estas consultas, los desarrolladores pueden definir los estilos de cualquier elemento según el tamaño de la pantalla.

Nota

Podemos percibir media-query como instrucciones: "Si la pantalla del usuario es un escritorio, aplica tales estilos al elemento. Si la pantalla del usuario es un teléfono inteligente, aplica otros estilos al elemento. Y así sucesivamente.".

La sintaxis básica de media-query es la siguiente:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

1. <media_type> - declara el tipo de dispositivo. Valores posibles:
   • all - valor por defecto. Si no se especifica nada, la regla media funciona para todos los dispositivos;
   • print - la regla media funciona para los dispositivos que producen documentos impresos, como impresoras;
   • screen - la regla media funciona para todos los dispositivos con pantalla física.
2. <media_feature> - declara las características del dispositivo. Uso más común:
   • min-width: - el ancho mínimo de la ventana gráfica;
   • max-width: - el ancho máximo de la ventana gráfica.
3. <operator> - media-type y media-feature están separados por el operador lógico opcional. Sus valores pueden ser: and o ,.

Nota

En los siguientes capítulos, consideraremos el uso de media-queries en la práctica.