Saltar al contenido principal

Diseño adaptable

Un sitio web debe ser accesible desde cualquier dispositivo. El diseño web adaptable permite cambiar la presentación dependiendo de características como el tamaño de la pantalla o la resolución.

La ventana de visualización

Para que los diferentes dispositivos muestren correctamente las páginas con diseño adaptable, se debe incluir la etiqueta meta viewport. Esta etiqueta permite ajustar el tamaño y la escala de la página, en la ventana del navegador, para que se adapte al dispositivo.

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

HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
  • La propiedad width con el valor device-width hace que el ancho de la página coincida con el de la pantalla del dispositivo.
  • La propiedad initial-scale con el valor 1 permite mantener la proporción de la página.

Aviso: Evita el uso de maximum-scale=1.0 o user-scalable=no, estas opciones impiden al usuario hacer zoom para ver mejor el contenido.

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.

Consultas de medios

Un elemento fundamental del diseño adaptable son las consultas de medios (media queries). Las consultas de medios permiten adaptar la presentación del contenido a los diferentes tamaños y resoluciones de los dispositivos.

Una consulta de medios indica que se aplique un estilo determinado cuando se cumple una condición.

Existen diferentes propiedades por las que podemos realizar consultas, como el ancho, alto o la orientación del navegador.

En el ejemplo siguiente, se indica que el texto aumente de tamaño a partir de un punto (breakpoint) de ancho de navegador determinado:

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

Imágenes adaptables

Para que una imagen se adapte a las diferentes resoluciones de pantalla, usamos la propiedad max-width con el valor 100%.

Ejemplo 1: Aplicar max-width: 100% a las imágenes.

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

Utilizando esta técnica, podemos cargar una única imagen de gran tamaño, que se adaptará ocupando siempre el tamaño máximo disponible.

Este sistema funciona bien, pero tiene un inconveniente, estamos cargando siempre una imagen grande, lo cual aumenta el tiempo de carga innecesariamente en dispositivos móviles.

Una solución más eficiente en este caso, sería utilizar picture. 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 consultas de medios.

Ejemplo 2: El elemento picture

HTML
<picture>
    <source srcset="car-large.jpg" media="(min-width: 800px)">
    <source srcset="car-medium.jpg" media="(min-width: 400px)">
    <img src="car-small.jpg" alt="Coche eléctrico">
</picture>

Vídeo adaptable

Para que un vídeo sea adaptable, manteniendo las proporciones, debemos utilizar algunas técnicas de CSS.

Ejemplo
HTML
<div class="video-container">
    <iframe width="800" height="450" src="https://www.youtube.com/embed/c_7eAVccuOk" allowfullscreen></iframe>
</div>
CSS
.video-container {
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0 0 56.25%;
    position: relative;
}

.video-container iframe,
.video-container object,
.video-container embed {
    border: 0;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

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 la ventana, aparece una barra en la parte de abajo que permite desplazar el contenido horizontalmente.

Ejemplo
# Encabezado Encabezado Encabezado Encabezado
1 Celda Celda Celda Celda
2 Celda Celda Celda Celda
3 Celda Celda Celda Celda
HTML
<div class="table-responsive">
    <table>
    ...
    </table>
</div>
CSS
.table-responsive {
    display: block;
    overflow-x: auto;
}