Diseño adaptable

El objetivo del diseño adaptable es que una misma página web se vea bien en cualquier dispositivo, independientemente del tamaño o la orientación de la pantalla.

A continuación vamos a ver una serie de técnicas para crear un sitio web adaptable.

Configurar la ventana de visualización

Incluye siempre la etiqueta meta viewport en el encabezado de la página.

Esta etiqueta permite ajustar el ancho de la ventana de visualización y la escala del documento, para que la página se muestre correctamente en los dispositivos móviles.

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

En el ejemplo anterior, estamos indicando 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.

Diseño fluido

El diseño fluido consiste en utilizar unidades relativas, como porcentajes, ems o rems en lugar de tamaños fijos.

En el siguiente ejemplo se establece un ancho del 90 % con un máximo de 1200 píxeles.

CSS
.container {
    max-width: 1200px;
    width: 90%;
}

Media Queries

Las media queries nos permiten aplicar estilos diferentes según el tamaño de pantalla, su resolución o su orientación.

Si, por ejemplo, queremos aplicar un ancho máximo de 960 píxeles a la clase container a partir de un ancho de pantalla de 992 píxeles, usamos la siguiente regla:

CSS
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

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

Tecnologías de diseño modernas

Desde la aparición del diseño adaptable en 2010, han aparecido nuevas tecnologías que permiten crear sitios web flexibles, como:

  • Flexbox: permite colocar los elementos de una página de forma flexible.
  • Grid: permite crear cuadrículas (filas y columnas) que se ajustan al espacio disponible.

Gracias a estas tecnologías ya no es necesario utilizar trucos de CSS, como por ejemplo la propiedad float para crear columnas.

Otras técnicas para adaptar el contenido

Existen técnicas para adaptar cada tipo de contenido: imágenes, vídeos, tablas, etc.) a los diferentes tamaños de pantalla y que se tratan en su apartado correspondiente dentro de este sitio web.