Saltar al contenido principal

Diseño adaptable

Un sitio web debe ser accesible desde cualquier dispositivo. Para lograrlo se utilizan una serie de técnicas que cambian la presentación dependiendo de características como el tamaño de la pantalla o la resolución. Es lo que se conoce como diseño web adaptable.

La etiqueta de ventana gráfica

Para que los dispositivos móviles muestren correctamente los sitios web con diseño adaptable, se debe incluir la etiqueta meta de ventana gráfica (viewport).

Esta etiqueta permite ajustar el tamaño y el escalado de la página en la ventana del navegador.

La configuración más común es la siguiente:

HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
  • Se usa width=device-width para que el ancho de la página coincida con el de la pantalla del dispositivo.
  • Y se usa initial-scale=1 para mantener la proporción de la página.

Aviso: Evita el uso de maximum-scale=1.0, esta opción deshabilita la posibilidad de hacer zoom en dispositivos móviles.

Ancho de pantalla fluido

Para que una página se adapte a diferentes tamaños de pantalla, debe tener un ancho fluido. Esto se consigue expresando el ancho en porcentajes, o en píxeles como ancho máximo, no fijo.

Ejemplo 1: anchura porcentual

CSS
.container {
    width: 90%;
}

En este ejemplo, el contenido situado dentro del elemento con la clase container ocupará el 90% de todo el ancho disponible, sea cual sea el tamaño de pantalla.

Ejemplo 2: anchura máxima en píxeles

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

En este caso, el contenido ocupará todo el ancho disponible hasta un máximo de 1200 píxeles.

Nota: Pueden combinarse estas dos propiedades para crear anchos porcentuales limitados a una anchura máxima en píxeles.

Uso de anchos relativos

Los contenidos de una página adaptable, especialmente los elementos grandes, deben tener un ancho relativo.

Por ejemplo, una imagen con un tamaño fijo y un ancho superior al de la pantalla, puede provocar desplazamiento horizontal de la ventana. Para solucionarlo se incluye la siguiente regla CSS, que limita el ancho de la imagen al tamaño máximo de la ventana:

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

Media queries

Un elemento fundamental del diseño adaptable son las media queries. Las media queries permiten adaptar la presentación del contenido a las diferentes resoluciones de pantalla.

Una media query indica que se aplique un estilo determinado cuando se cumple una condición.

La propiedad más utilizada es la del ancho de pantalla, que permite establecer reglas de estilo a partir de un punto determinado (breakpoint).

En el ejemplo siguiente, se indica que el texto aumente de tamaño a partir de un ancho de pantalla definido:

CSS
@media screen and (min-width: 48em) {
    body {
        font-size: 1.125em;
    }
}