Diseño adaptable: adaptación a todas las pantallas

Al finalizar este tema

Comprenderá las consultas de medios, la estrategia de diseño "mobile first" y los patrones clave del diseño adaptable.

Un solo código, todas las pantallas

Un sitio web se visualiza en ordenadores de escritorio, tabletas y teléfonos inteligentes. El tamaño de la pantalla varía. El diseño adaptable consiste en modificar el diseño para que se ajuste a todos los tamaños de pantalla utilizando un único HTML/CSS.

Etiqueta meta viewport

El primer paso para implementar el diseño adaptable:

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

Sin esta etiqueta, el navegador móvil renderiza la página con el tamaño de escritorio y luego la escala, lo que hace que el texto sea muy pequeño.

Consultas de medios

/* Estilos base (móvil) */
.container {
  display: flex;
  flex-direction: column;
}

/* Para 768px o más (tablet) */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

/* Para 1024px o más (escritorio) */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Las consultas de medios aplican diferentes estilos CSS según el tamaño de la pantalla. min-width significa "cuando el ancho es mayor o igual a este valor".

Enfoque de diseño "móvil primero"

El enfoque de diseño "móvil primero" consiste en definir los estilos base para dispositivos móviles y, a medida que aumenta el tamaño de la pantalla, agregar estilos adicionales, como se muestra en el código anterior.

El enfoque opuesto es diseñar primero para escritorios y luego adaptar el diseño a pantallas más pequeñas, lo que se conoce como "escritorio primero". Se recomienda el enfoque de diseño "móvil primero" por las siguientes razones:

• Hay más usuarios de dispositivos móviles.
• Si se prioriza la información esencial en pantallas pequeñas, es más fácil ampliar el diseño en pantallas más grandes.
• Por el contrario, es difícil adaptar diseños complejos para pantallas grandes a pantallas pequeñas.

Uso de unidades relativas

Las unidades relativas son más adecuadas para el diseño adaptable que las unidades absolutas (px):

/* Fijo — puede desbordarse de la pantalla */
.box { width: 800px; }

/* Relativo — se adapta a la pantalla */
.box { width: 90%; max-width: 800px; }

/* rem — proporcional al tamaño de fuente del usuario */
.title { font-size: 2rem; }

En lugar de usar un tamaño fijo para la imagen:

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

Si es más grande que el contenedor, se ajusta automáticamente para mantener la proporción.

Puntos de interrupción comunes

320px  — móvil pequeño
375px  — móvil estándar (iPhone)
768px  — tablet
1024px — escritorio pequeño
1280px — escritorio

No es necesario obsesionarse con este número. Lo mejor es definir los puntos de interrupción donde el contenido empieza a desorganizarse.

Clave

El diseño adaptable aplica diferentes estilos CSS según el tamaño de la pantalla mediante media queries. Se recomienda diseñar primero para dispositivos móviles y luego adaptar a pantallas más grandes. Utilice unidades relativas (%, rem) junto con max-width en lugar de unidades fijas (px).