No podemos imaginar el desarrollo web moderno sin diseños adaptativos/responsivos. Permiten a los usuarios utilizar las fuentes web por igual en cualquier dispositivo: un smartphone, una tableta, un ordenador de sobremesa o un televisor.

¿Cómo funciona?

1. El equipo de desarrollo define cómo se verá cada elemento en función del tamaño de la pantalla.
2. Establece las instrucciones necesarias en el código.
3. El navegador rastrea los cambios de una ventana gráfica.
4. 1. El navegador aplica las reglas que el equipo de desarrollo ha introducido 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 establecer los estilos de cualquier elemento en función del tamaño de la pantalla.

Nota

Podemos percibir media-query como instrucciones: "Si la pantalla del usuario es un ordenador de sobremesa, aplica estos estilos al elemento. Si la pantalla del usuario es un smartphone, aplica otros estilos al elemento. Y así sucesivamente".

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

1. <media_type> - declara el tipo de dispositivo. Valores posibles:
   • all - valor por defecto. Si no se especifica nada, la regla de medios funciona para todos los dispositivos.
   • print - la regla de medios funciona para los dispositivos que producen documentos impresos, como las impresoras.
   • screen - la regla de medios 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: - la anchura mínima de la ventana gráfica.
   • max-width: - la anchura máxima 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.