Media query CSS3 para hacer un sitio web responsive que se adapte al tamaño de pantalla

Las media query nos permiten agregar estilos específicos y adaptar todo el sitio web o ciertos elementos a las características del monitor, tableta o smartphone donde está siendo visualizado el sitio web.

INTRODUCCIÓN A MEDIA QUERY Y EL DISEÑO RESPONSIVE

Demo

Para aquellos que han creado hojas de estilo que solamente aplican cuando se va a imprimir la página web, el concepto de crear hojas CSS específicas que se pongan en efecto bajo ciertas condiciones es familiar. Con CSS2 fueron introducidos los media type, que permitían especificar CSS para diferentes dispositivos y condiciones, pero lo más utilizados son screen y print.

Media query en CSS3 parte de esa idea, y la adapta para poder analizar las capacidades del dispositivo. Con media query podemos chequear el ancho y alto de la ventana del navegador, la resolución y dimensiones de la pantalla del dispositivo, la orientación (landscape o portrait), color, entre otros.

Una media query es una expresión lógica que es verdadera o falsa. Está compuesta de un media type y de la query propiamente dicha, compuesta por una o más media feature separadas por “and”, que contienen los parámetros a inspeccionar.

Se utilizarán los estilos especificados cuando el media type y la/s media features corresponden con el dispositivo donde la página está siendo visualizada y todas las expresiones de la media query son verdaderas.

El diseño adaptable o responsive tiene sus bases en las media query, ya que prepara estilos específicos para los diferentes tamaños de pantallas para lograr que siempre tengamos una experiencia de lectura y visualización de imágenes óptima.

¿Cómo hago que mi sitio web sea responsive?

Paso previo

Para que el sitio web se adapte a los dispositivos móviles necesitamos añadir dentro de las etiquetas <head> de nuestro documento lo siguiente:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0">

Un sitio optimizado para móviles, “mobile-optimized”, contiene lo siguiente dentro de la etiqueta meta name="viewport":

  • Un valor de ancho que controlará el tamaño del viewport, que puede ser un número: width=600 o el valor especial device-width, que es el ancho de la pantalla en pixeles CSS a la escala de 100%. Así mismo se puede configurar la altura, para los sitios que lo necesiten con height=device-height
  • La propiedad initial-scale controla el nivel de zoom cuando la página es cargada.
  • Se puede controlar el zoom que los usuarios tienen permitido utilizar con maximum-scale, minimum-scale, y user-scalable.

Media query no funciona en mi smartphone

Si en tu smartphone no funciona media query es porque no has configurado correctamente el viewport. Deberías añadir el código que está presentado más arriba en la cabecera del sitio, adaptando sus parámetros a tus necesidades.

CSS

Las hojas de estilo funcionan como una cascada, las reglas que se escriben en el inicio de la hoja serán sobreescritas por aquellas que vayamos colocando más abajo.

Luego de haber creado los estilos para las pantallas de ordenador, comenzaremos a añadir las media query para que las reglas dentro de ellas tengan preferencia sobre las generales.

Es importante no recargar el CSS repitiendo propiedades que no necesitamos modificar. A modo de ejemplo: si el color de fondo de una div será #CCC en todos los tamaños de pantalla no es necesario añadir background: #CCC; en cada media query.

Estilos que se aplican a todos los dispositivos
@media all and (max-width: 600px) { ... }
@media (max-width: 600px) { ... }

Estas dos expresiones significan lo mismo, ya que para las media query que se aplican en todos los media type tenemos la posibilidad de utilizar una propiedad resumida, que omite la palabra all y el operador and. El media type por defecto es all.

Estilos que se aplican a ciertos dispositivos bajo ciertas condiciones
@media screen and (orientation: portrait) and (min-width: 500px) { ... }

Cuando necesitamos especificar el media type y uno o más media features utilizamos and para unirlas, ya que funciona como un “y” lógico.

Estilos compartidos para dispositivos diferentes
@media screen and (max-height: 800px),
@media projection and (color) { ... }

Se pueden unir varias media query en una lista utilizando coma para separarlas. Si una de ellas es verdadera, como consecuencia todas las demás lo son y viceversa. La coma expresa un “o” lógico.

Importar hoja de estilos bajo condiciones determinadas

Otro modo de llamar estilos diferentes con CSS es utilizando @import (no es recomendado ya que altera el patrón de carga en Internet Explorer).

@import url(color.css) screen and (color);

Explicitamos el link a la hoja de estilos y luego la media query.

HTML

Es posible añadir media query en HTML agregando ciertos parámetros al link que llama la hoja de estilos.

<link rel="stylesheet" media="screen and (color)" href="example.css" />

Añadimos el media type y las media features del mismo modo que lo hicimos en el CSS. En este ejemplo, se llamará la hoja de estilos example.css cuando estemos utilizando una pantalla que sea a color.

Con estos conceptos es posible adaptar cualquier sitio web para que se vea de la mejor manera en todos los dispositivos.

Ejemplos de sitios con responsive design

El objetivo de adaptar la página web al móvil, es mejorar la visualización y la lectura del mismo. Presentar la mayor cantidad de información importante es una buena práctica. Estos cuatro ejemplos de sitios web responsive intentan optimizar el sitio para pantallas pequeñas para que los datos más relevantes puedan ser vistos rápidamente.

Página de demostración

Hemos realizado una página sencilla de demostración, donde podrán observar el comportamiento del estilo a medida que redimensionan el tamaño del navegador.

Demo

En este ejemplo hemos definido un estilo general, un estilo para las pantallas que miden entre 600 pixeles y 980 pixeles de ancho y uno para aquellos dispositivos con 600 pixeles o menos de ancho.

Scroll to top