Las consultas de los medios preguntan: ¿qué ancho tiene la pantalla? Las consultas sobre contenedores preguntan: ¿qué ancho tiene este componente? Esa diferencia decide dónde se encuentran los puntos de interrupción, y hacerlo bien es lo que hace que un componente sea reutilizable en otro lugar. Actualmente, el noventa y cinco coma ocho uno por ciento de los navegadores admiten consultas de contenedores.
Utilice consultas de medios para el plan de página
- Un diseño de tres columnas que se colapsa en una sola columna en los teléfonos.
- La diferencia entre el encabezado fijo y un documento de flujo normal en pantallas pequeñas.
- Cualquier cosa que un visitante describiría como "la página completa" por vista.
Utilice consultas de contenedor para las piezas.
.card-wrap { container-type: inline-size; }
@container (min-width: 480px) {
.card { display: grid; grid-template-columns: 140px 1fr; }
}La tarjeta ahora conoce sus propias reglas de diseño. Suéltelo en una barra lateral y se acumula, suéltelo en la página de inicio y se dividirá en dos columnas. Ninguna consulta de medios en el mundo puede hacer eso, porque la consulta de medios no sabe dónde aterrizará la tarjeta.
3. Cómo convertir los clásicos errores de punto de interrupción:
- Nunca escribas @media (max-width: 480px) para arreglar un solo widget.
- Declare el tipo de contenedor en el contenedor. Sin él, la consulta del contenedor no coincide silenciosamente con nada, un error que también es invisible.
- Pruebe en una ventana de tamaño variable, no solo en las de devtools.
Un componente cuyo estilo depende de su contenedor es finalmente realmente portátil. Eso es muy lindo.
Regla de migración: toque la página, ajuste una consulta de medios. Toca un componente, alcanza un contenedor. Ambos funcionan en el mismo archivo y ninguno reemplaza al otro.