Diseño adaptable

Ventana de visualización

La etiqueta <meta> "viewport" permite ajustar la ventana de visualización para que la página se ajuste correctamente a la pantalla de los dispositivos móviles.

En el siguiente ejemplo se indica que el ancho de pantalla coincida con el del dispositivo y que la relación entre los píxeles CSS y los píxeles del dispositivo sea de 1:1.

<meta name="viewport" content="width=device-width, initial-scale=1">

Evita usar los valores "maximum-scale=1, user-scalable=no" para no impedir que los usuarios hagan zoom, especialmente quienes necesitan ampliar el contenido por razones de accesibilidad.

Diseño fluido

El diseño fluido consiste en utilizar unidades relativas, como porcentajes, ems o rems.

Si necesitas limitar el ancho máximo con píxeles, utiliza siempre max-width en lugar de establecer un ancho fijo.

En el siguiente ejemplo se establece un ancho máximo de 1280 píxeles:

.container {
  max-width: 1280px;
}

Media Queries

Las media queries permiten aplicar estilos específicos según el tamaño, la resolución o la orientación de la pantalla.

El punto a partir del cual se aplica una media query se denomina breakpoint.

Por ejemplo, si queremos cambiar el tamaño de fuente a partir de un ancho de pantalla de 992 píxeles, usamos la siguiente regla:

@media (min-width: 992px) {
  .body {
    font-size: 1.125rem;
  }
}

Flexbox y Grid

Flexbox y Grid son dos sistemas de diseño en CSS pensados para organizar y distribuir elementos en una página web.

• Flexbox: está optimizado para distribuir los elementos en una dimensión a la vez (fila o columna).
• Grid: permite trabajar con filas y columnas simultáneamente, ofreciendo mayor control sobre la disposición general.

Tipografía adaptable

La forma clásica para cambiar el tamaño del texto en función del ancho de pantalla es usando media queries:

@media (min-width: 48rem) {
  html {
    font-size: 1.25rem;
  }
}

Una opción más avanzada para conseguir un tamaño de texto fluido es la función clamp:

html {
  font-size: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
}

Mediante esta función definimos un valor mínimo, un valor variable y un valor máximo.

Imágenes adaptables

Una imagen accesible debe adaptarse a las diferentes resoluciones y tamaños de pantalla.

Para que una imagen sea fluida usamos la propiedad max-width:

img {
  max-width: 100%;
  height: auto;
}

Este método es efectivo, pero tiene una desventaja: siempre se carga una imagen grande, lo que puede ralentizar el sitio en dispositivos móviles.

El atributo srcset

El atributo srcset permite definir un conjunto de imágenes con diferentes tamaños y el atributo sizes indica qué imagen debe utilizar el navegador según el tamaño de la ventana:

<img
  srcset="coche-576w.jpg 576w, coche-800w.jpg 800w"
  sizes="(max-width: 600px) 576px, 800px"
  src="coche-800w.jpg"
  alt="Coche eléctrico"
/>

El elemento picture

A veces necesitamos mostrar diferentes imágenes en diferentes tamaños de pantalla. Por ejemplo, una imagen de un paisaje puede mostrar muchos detalles cuando se ve en un monitor grande, pero que se pierden al verla en un móvil.

El elemento picture permite definir múltiples imágenes mediante el atributo srcset y especificar cuándo debe cargar cada una con el atributo media, siguiendo las mismas reglas que las media queries.

<picture>
  <source srcset="mesa.jpg" media="(max-width: 767px)">
  <source srcset="despacho.jpg" media="(min-width: 768px)">
  <img src="despacho.jpg" alt="Despacho con mesa escritorio en el centro.">
</picture>

El elemento picture también permite usar formatos de imagen modernos, como WebP, y ofrecer una alternativa compatible para navegadores que no los soportan.

<picture>
  <source type="image/webp" srcset="playa.webp">
  <img src="playa.jpg" alt="Playa mediterránea al atardecer.">
</picture>

Tablas adaptables

La técnica más simple para crear tablas adaptables consiste en permitir el desplazamiento horizontal. De esta forma, cuando la tabla no cabe en el ancho de la ventana, podemos desplazarla para ver todo el contenido.

Veamos un ejemplo:

<div class="table-responsive" tabindex="0">
  <table>
    <!-- ... -->
  </table>
</div>

El atributo tabindex="0" permite que la tabla se pueda enfocar al navegar con el teclado.

.table-responsive { overflow-x: auto; }