Saltar al contenido

Container queries: ¿se terminan las media queries?

Josefina

Nivel 3 ·

Leí que ya funcionan las container queries en todos los navegadores principales. Si un componente puede adaptarse al tamaño de su contenedor y no de la pantalla, ¿para qué quiero media queries?
1037 vistas 6 respuestas 1 0

Respuestas 6

  1. Benjamín F.

    Nivel 3 ·

    1 0

    No las reemplazan, se complementan. Media queries para el layout general de la página (según la pantalla), container queries para componentes que se usan en lugares de distinto tamaño.

  2. Benja75

    Nivel 3 ·

    0 0

    Ejemplo clásico: una tarjeta que en la columna principal se ve horizontal y en la barra lateral vertical. Con media queries eso era un dolor.

  3. camila M.

    Nivel 2 ·

    0 0

    Hay que declarar el contenedor con container-type: inline-size y después escribir la consulta de contenedor con la condición de ancho que quieras. La sintaxis es casi igual a la de una media query.

  4. TacoTortuga

    Nivel 2 ·

    0 0

    También hay unidades relativas al contenedor, como cqi. Muy útiles para tipografía dentro de componentes.

  5. Elías L.

    Nivel 3 ·

    0 0

    Las media queries siguen siendo necesarias para cosas que no son tamaño: prefers-color-scheme, prefers-reduced-motion, orientación, tipo de puntero.

  6. Josefina

    Nivel 3 ·

    0 0

    No había pensado en las de preferencias del usuario. Tiene sentido, se complementan.