Responsive Design

El responsive design es una práctica fundamental en el desarrollo web moderno, que permite que las páginas web se adapten a diferentes tamaños de pantalla y dispositivos. Esto se logra mediante el uso de media queries y otras herramientas de CSS.

¿Qué es el Responsive Design?

El responsive design asegura que un sitio web se vea y funcione bien en:

Teléfonos móviles
Tablets
Monitores de escritorio
Televisores inteligentes
Cualquier dispositivo!

La clave está en ajustar el diseño de la página en función de las características del dispositivo.

¿Qué son las Media Queries?

Las media queries son una característica de CSS que permite aplicar estilos condicionales basados en el entorno del usuario, como el tamaño de la pantalla, la orientación o la resolución.

Sintaxis básica

@media (condición) {
  /* Estilos que se aplican si se cumple la condición */
}

Ejemplo básico

@media (width >= 40rem) {
  body {
    background-color: lightblue;
  }
  .container {
    max-width: 40rem;
  }
}

En este caso, el fondo del body (nuestra página) será azul claro si el ancho de la pantalla es mayor o igual a 40rem, y el contenedor .container tendrá un ancho máximo de 40rem.

Breakpoints sugeridos

Los breakpoints son puntos de interrupción en los que el diseño cambia para adaptarse mejor a las dimensiones del dispositivo. Aquí tienes una lista de breakpoints comunes utilizando la sintaxis de rango:

@media (width >= 40rem) {} /* sm: 640px */
@media (width >= 48rem) {} /* md: 768px */
@media (width >= 64rem) {} /* lg: 1024px */
@media (width >= 80rem) {} /* xl: 1280px */
@media (width >= 96rem) {} /* 2xl: 1536px */

@media (width < 40rem) {} /* max-sm: 640px */
@media (width < 48rem) {} /* max-md: 768px */
@media (width < 64rem) {} /* max-lg: 1024px */
@media (width < 80rem) {} /* max-xl: 1280px */
@media (width < 96rem) {} /* max-2xl: 1536px */

@media (orientation: portrait) {} /* Vertical */
@media (orientation: landscape) {} /* Horizontal */

Aplicando los Breakpoints

Puedes utilizar los breakpoints dentro de tus elementos directamente, sin necesidad de separarlos:

body {
  /* def */ background: peru;
  /* sm  */ @media (width >= 40rem) { background: rebeccapurple; }
  /* md  */ @media (width >= 48rem) { background: tomato; }
  /* lg  */ @media (width >= 64rem) { background: midnightblue; }
  /* xl  */ @media (width >= 80rem) { background: lemonchiffon; }
  /* 2xl */ @media (width >= 96rem) { background: palevioletred; }
}

nav#nav-bar {
  ul {
    display: flex;
    flex-direction: column;
    @media (width >= 64rem) { /* lg: 1024px */
      flex-direction: row;
    }
  }
}

.container {
  width: 100%;
  margin-inline: auto;
  @media (width >= 80rem) { /* xl: 1280px */
    @media (width < 96rem) { /* max-2xl: 1536px */
      /* también puedes hacer directamente `@media (80rem < width < 96rem) { ... }` */
      width: 80%;
    }
  }
}

Ejemplo completo de Responsive Design

A continuación, un ejemplo de los breakpoints sugeridos (en px):

Resizable Container Preview

320px sm md lg xl 2xl ;D

Hola!, esta preview no usa @media queries :)

Para construir esta preview no utilicé @media queries, sino que usé @container para que funcione directamente en un contenedor y no en el body. ¿Quieres saber más?

CSS Container Queries

@layer base, example;

@layer example {
  body {
    background-color: var(--bg);
    --bg: light-dark(#3d0e0e, #f1e8a2);
    @media (width >= 320px)  { --bg: light-dark(#791b1b, #f0c96f); }
    @media (width >= 640px)  { --bg: light-dark(#b9110d, #efa93c); }
    @media (width >= 768px)  { --bg: #e74511; }
    @media (width >= 1024px) { --bg: light-dark(#efa93c, #b9110d); }
    @media (width >= 1536px) { --bg: light-dark(#f1e8a2, #3d0e0e); }
    @media (width >= 1280px) { --bg: light-dark(#f0c96f, #791b1b); }
  }
}

@layer base {
  @property --_w {
    syntax: "<length>";
    inherits: true;
    initial-value: 100vw;
  }

  :root {
    --screen-width: tan(atan2(var(--_w), 1px));
  }

  html {
    color-scheme: light dark;
    font-family: Inter, system-ui;
  }

  body {
    color: #000;
    font-size: xx-large;
    transition: 100ms;
    min-height: 100dvh;
    align-content: center;
    text-align: center;
    margin: 0;
    &::after {
      transition: 100ms;
      counter-reset: w var(--screen-width);
      content: counter(w) "px";
      padding: 0.25rem 0.5rem;
      border-radius: 0.5rem;
      mix-blend-mode: difference;
      background: color-mix(in oklab, var(--bg), transparent 30%);
    }
  }
}

Ver en Codepen

Nueva sintaxis de media queries

La nueva sintaxis simplifica el uso de operadores comparativos como >=, <=, <, >, y = en lugar de los tradicionales min-width y max-width. Esto hace que las condiciones sean más legibles y fáciles de escribir.

Ejemplo:

@media (width >= 40rem) {
  /* Reglas CSS */
}

Esto es equivalente a:

@media (min-width: 40rem) {
  /* Reglas CSS */
}

Con las media query range features, puedes utilizar los prefijos inclusivos min- y max- o los operadores de sintaxis de rango más concisos <= y =>. Las siguientes media-queries son equivalentes:

@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

@media (30em <= width <= 50em) {
  /* … */
}

Inclusivos

Las comparaciones de rangos anteriores son inclusivas, es decir, incluyen el valor límite. Para no incluir el valor de comparación, usa < y >.

@media (30em < width < 50em) {
  /* … */
}