Objetivos

En la actualidad, los diseñadores de sitios web deben producir sitios perfectamente visibles y legibles con independencia del dispositivo de consulta: pantalla de ordenador, tableta o teléfono inteligente. Crear sitios que se adaptan automáticamente al soporte se denomina Responsive Web Design o diseño web responsivo, abreviado habitualmente como responsive o responsivo. Las consultas de medios (Media Queries) permiten definir un formato y una maquetación específicos según la pantalla de destino. Es la técnica de CSS que se utiliza para crear sitios web responsivos, en combinación con cuadrículas o con cajas flexibles.

Las consultas de medios

1. Criterios

Las consultas de medios permiten dirigirse con precisión a los diferentes tipos de pantallas de difusión según criterios bien definidos.

Se pueden utilizar los siguientes criterios en las consultas de medios:

Anchura de visualización: width. Es posible comprobar la anchura del área de visualización del navegador. Ejemplo: width: 780px.
Altura de visualización: height. Es posible comprobar la altura del área de visualización del navegador.
Anchura física: device-width. Es posible comprobar la anchura física de la pantalla de difusión.
Altura física: device-height. Es posible comprobar la altura física de la pantalla de difusión.
Orientación de la pantalla: orientation. Ejemplos: orientation: portrait u orientation: landscape. Muy práctico para probar si el usuario usa su dispositivo en vertical (portrait) o en horizontal @media screen and (max-width: 780px) { (landscape).

He aquí algunos otros criterios que son un poco menos habituales:

Proporción: aspect-ratio. Para comprobar el valor de la relación anchura/altura. Ejemplo: aspect-ratio: 16/9
Proporción física: device-aspect-ratio. Para comprobar el valor de la relación física anchura-altura de la pantalla.
Color: color. Permite comprobar si el medio de salida usa color (valor por defecto), blanco y negro o niveles...

El tamaño de las pantallas

Las pantallas de las tabletas y los teléfonos inteligentes presentan resoluciones muy diferentes según el fabricante. Para determinar las resoluciones de las pantallas, en el elemento <head>, hay que usar el elemento <meta> con el atributo viewport. En el atributo content, el valor device-width se dirige a la anchura física de la pantalla.

He aquí un ejemplo usando esta sintaxis:

<meta name="viewport" content="width=device-width" />

Esto hará que la visualización se adapte a la superficie de renderizado de cada navegador en dispositivos móviles.

Ejemplo de maquetación responsiva

1. El sitio inicial

Este es el sitio que vamos a crear. En un primer momento, no será responsivo. He aquí el código de la página HTML:

<!DOCTYPE HTML>   
<html lang="es">   
<head>   
  <title>Mi página de inicio</title>   
  <meta charset="UTF-8"/>   
  <link rel="stylesheet" href="styles.css"/>   
</head>   
<body>   
<div id="contenedor">   
    <header id="cabecera">   
      <h1>Mi sitio web</h1>   
      <h2>El eslogan de mi sitio web</h2>   
    </header>   
    <nav id="navegacion">   
      <p> 

        <a href="#">Enlace 1</a>|<ahref="#">Enlace 2</a>|  
        <a href="#">Enlace 3</a>|<a href="#">Enlace 4</a>| 
<a href="#">Enlace 5</a>|<a href="#">Enlace 6</a> 
    </p>   
  </nav>   
  <section id="contenido">   
    <article>   
     <h1>Mi primer artículo</h1>   
     <p>Donec ullamcorper...</p>   
      <p>Nullam quis risus...</p>   
    </article>   
    <article>   
      <h1>Mi segundo artículo</h1>   
      <p>Cras justo odio...</p>   
      <p>Donec id elit...