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.

Para que una página web sea adaptable utilizamos una serie de técnicas que vamos a ver a continuación.

Configurar la ventana de visualización

Incluye la etiqueta meta viewport en el encabezado de la página. Esta etiqueta permite ajustar el ancho y la escala para que la página se adapte al navegador.

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

En el ejemplo anterior, estamos indicando a la página 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 una serie de estilos a partir de un ancho de 575 píxeles, usamos la siguiente regla:

CSS
@media (min-width: 575px) { ... }

Otras técnicas para adaptar el contenido

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