Estilo adaptado al tamaño

Descripción general

El diseño adaptado al tamaño permite que los componentes cambien su diseño o apariencia según el espacio disponible, en lugar del tamaño de toda la pantalla. Esto es útil para componentes como tarjetas o barras de navegación que se pueden colocar en diferentes partes de un diseño (como una barra lateral estrecha o un área principal amplia).

Se recomienda usar consultas de contenedores porque hace que los componentes sean verdaderamente modulares. No necesitas saber dónde se ubicará el componente ni escribir consultas de medios complejas para controlar todos los diseños posibles.

Implementación

1. Define el contenedor

OBLIGATORIO: Primero, debes indicarle al navegador qué elemento es el contenedor que se medirá.

.card-container {
  /* Define the container type. Use 'inline-size' for width-based queries. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
}

2. Aplica estilos según el tamaño del contenedor

Usa la regla @container para aplicar estilos cuando el contenedor alcance un tamaño determinado.

/* Default styles for small containers (stacked layout) */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Styles for larger containers (side-by-side layout) */
/* This triggers when the container is wider than 400px */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card-image {
    width: 150px;
    height: 150px;
  }
}

3. Muestra contenido de forma condicional

También puedes usar consultas de contenedores para ocultar o mostrar detalles adicionales cuando haya más espacio.

.card-details {
  /* Hide extra details by default in small spaces */
  display: none;
}

@container (min-width: 600px) {
  .card-details {
    /* Show details when there is plenty of room */
    display: block;
  }
}

Estrategias de resguardo

En el caso de los navegadores que no admiten consultas de contenedores, el mejor enfoque es usar un diseño predeterminado seguro (como el diseño vertical apilado) y mejorarlo de forma progresiva con consultas de medios si el tamaño general de la pantalla lo permite.

/* Default safe stacked layout */
.card {
  display: flex;
  flex-direction: column;
}

/* Fallback using media queries for older browsers */
@media (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

/* Overwrite with container queries where supported */
@supports (container-type: inline-size) {
  @media (min-width: 600px) {
    .card {
      /* Reset media query fallback if needed, or let container query handle it */
      flex-direction: column;
    }
  }
  
  @container (min-width: 400px) {
    .card {
      flex-direction: row;
    }
  }
}

Esto garantiza que los usuarios de navegadores más antiguos sigan obteniendo un diseño utilizable, incluso si no se adapta perfectamente a cada ancho de contenedor específico.