Media queries en CSS

22-03-2023
Tempo de lectura: 0 minutos

Una de las herramientas que permiten que la página web sea "responsive" es el uso de Media queries en CSS


	Contenido Objetivo CSS Breakpoints Referencias

Objetivo	Para tener una buena presentación de contenido de la página web, dependiendo del formato del dispositivo utilizado, se requiere diseñar el contenido en función de la pantalla en la que se va a mostrar. El mejor diseño es el que se hace a medida para cada dispositivo. Esto es complicado porque implica tener un diseño preparado para cada formato. Aunque lo podemos preparar para diferentes tamaños de pantalla, de forma genérica, y presentarlo en cada pantalla previa detección del dispositivo.
CSS	Con CSS tenemos algo similar pero no es necesario que dupliquemos el contenido de la página web, podemos utilizar las Media Queries para indicar las reglas de presentación del contenido dependiendo del formato de pantalla del dispositivo. Con esta técnica conseguimos un ajuste que funciona bien y solo hemos de trabajarnos un fichero CSS. La sintaxis, a través de un ejemplo, es esta:
	`@media screen and (max-device-width: 480px) { h1 { font-size: 16px; } }`
	Donde `screen` es el medio y `max-device-width: 480px` es la ruptura (breakpoint) Utilizamos las llaves para definir el área en la que se aplicarán los estilos cuando se cumplan las condiciones de `@media` La forma en que las Media Queries nos ayudan a cubrir los diferentes formatos de pantalla en los dispositivos es la siguiente. Primero necesitamos saber qué resoluciones de pantalla podemos tener y agruparlas en una serie de dimensiones. Los casos más generales que he utilizado son tres: móvil, tablet y desktop. Cada uno de ellos con las siguientes dimensiones:
	`/* mobile / @media screen and (max-device-width: 480px) { h1 { font-size: 16px; } } / mobile tablet device / @media screen and (min-device-width: 480px) and (max-device-width: 768px) { h1 { font-size: 18px; } } / desktop */ @media only screen and (min-width: 1024px) { h1 { font-size: 20px; } }`
	Cualquier otro estilo fuera de estas media queries se aplicará siempre, a menos que la query lo reemplace. Las Media Queries tienen una sintaxis gastante amplia para poder definir cómo se visualiza el contenido en función del dispositivo. Un punto de interrupción (breakpoint) es una cláusula para determinar cuándo cambiar el diseño y adaptar las nuevas reglas dentro de las media queries. Algunos ejemplos:
	`@media (max-width: 600px) and (orientation: landscape) { ... } @media (min-width: 700px), handheld and (orientation: landscape) { ... } @media not screen and (color), print and (color) { ... }`
	Para el uso de pantallas panorámicas podemos tener un breakpoint en función de aspecto
	`@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }`
Breakpoints	Los breakpoints comunes que se utilizan para las diferentes pantallas son:
	`320px - 480px --> dispositivos móviles 481px - 768px --> iPads, Tablets 769px - 1024px --> pequeñas pantallas, laptops 1025px- 1200px --> sobremesa, pantallas grandes a partir de 1201px --> panorámicas, TV`

Referencias	Media Queries https://developer.mozilla.org
	Media Queries para dispositivos https://css-tricks.com