jairogarcíarincón
Según Mozilla Developer Network, una media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color.
Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo, lo que se conoce diseño líquido o responsive.
La sintaxis de las media queries consiste en un media type y una o mas expresiones, implicando características del medio, la cual se resuelve como verdadera o falsa. El resultado de la consulta es verdadera si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo mostrado y todas las expresiones en el media query son verdaderas. Por ejemplo:
047-media-queries.css
Tal y como se muestra en el siguiente código, también se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only.
048-media-queries.css
A partir de los ejemplos anteriores, en la práctica podríamos definir dos plantillas básicas de media-queries para desarrollar prácticamente cualquier proyecto web.
NOTA: Estos valores de breakpoint coinciden además con los utilizados por Angular Material, mientras que otras librerías como Tailwind o Bootstrap utilizan otros valores diferentes, aunque similares.
Plantilla 1: Maquetación responsive a partir del diseño más grande (el de escritorio)
049-media-queries.css
Plantilla 2: Maquetación responsive a partir del diseño más pequeño (el de móvil)
050-media-queries.css
No obstante, recuerda que es posible (y se deben) incluir tantos breakpoints como sean necesarios para ajustar el diseño a las especificaciones.
Viewport
Puesto que no todos los dispositivos tienen el mismo ancho ni la misma resolución, debemos asegurarnos de que nuestro sitio web se muestra adecuadamente en una amplia variedad de tamaños de pantalla y orientaciones.
Por este motivo, debemos configurar correctamente en el head de nuestro html la meta etiqueta viewport.
El viewport del navegador es el área de la ventana en el cual se puede mostrar el contenido de la web, y en muchas ocasiones este tamaño no es el mismo que el de la página, motivo por el cual aparecen las barras de scroll tanto horizontales como verticales.
Algunos dispositivos presentan las páginas en un viewport virtual, que suele ser más ancho que la pantalla, y luego reducen el resultado presentado para que pueda verse todo a la vez. Por ejemplo, si la pantalla de un móvil tiene una anchura de 640px, las páginas se renderizarán con una ventana virtual de 980px, y luego se reducirán para que quepan en el espacio de 640px.
Esta ventana virtual es una forma de hacer que los sitios no optimizados para móviles se vean mejor en dispositivos de pantalla estrecha, pero esta solución no es buena si el sitio web utiliza media-queries ya que, por ejemplo, si la ventana virtual es de 980px, las media-queries que se activan a 640px o 480px o menos nunca se utilizarán.
La meta tag viewport nos permite resolver este problema, siempre que la configuremos adecuadamente. Ésta es la configuración típica para un sitio optimizado en para móviles que deberíamos añadir dentro de la etiqueta head:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
En esa configuración, hemos utilizado tres atributos:
- width: Controla el tamaño de la ventana. Puede establecerse a un número específico de píxeles como width=600 o al valor especial device-width, que es 100vw, o 100% del ancho de la ventana. Mínimo: 1. Máximo: 10000. Valores negativos: ignorados.
- initial-scale: Controla el nivel de zoom cuando se carga la página por primera vez. Mínimo: 0.1. Máximo: 10. Por defecto: 1. Valores negativos: ignorados.
- user-scalable: Controla si se permiten las acciones de zoom en la página. Valores válidos: 0, 1, sí o no. Por defecto: 1, que es lo mismo que sí. Establecer el valor 0, que es lo mismo que no, va en contra de las Web Content Accessibility Guidelines (WCAG).
Esta información se ha obtenido de la referencia oficial de Viewport meta tag de MDN, en la que puedes obtener información más detallada y conocer el resto de atributos disponibles.
Publicado el 03 de Diciembre de 2024
maquetacionwebresponsive flexboxgridangularmaterialmedia queries