{"id":1123,"date":"2026-06-03T15:22:35","date_gmt":"2026-06-03T15:22:35","guid":{"rendered":"https:\/\/www.gloobs.com\/blog\/?p=1123"},"modified":"2026-06-09T13:30:12","modified_gmt":"2026-06-09T13:30:12","slug":"container-queries-vs-media-queries","status":"publish","type":"post","link":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/","title":{"rendered":"Container queries vs media queries \u00bfQu\u00e9 usar y cu\u00e1ndo?"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; admin_label=\u00bbsection\u00bb _builder_version=\u00bb4.16&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_row admin_label=\u00bbrow\u00bb _builder_version=\u00bb4.16&#8243; background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb][et_pb_text _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<article>\n<header>\n<h1>Container queries vs media queries<\/h1>\n<p>Las media queries siguen siendo esenciales para la estructura general de una interfaz, pero las container queries resuelven un problema que llevaba a\u00f1os arrastr\u00e1ndose en sistemas modulares: hacer que un componente responda al espacio que realmente tiene, no al tama\u00f1o global de la ventana.<\/p>\n<\/header>\n<section>\n<h2>Del viewport al componente<\/h2>\n<p>El responsive cl\u00e1sico parte del viewport. Definimos breakpoints globales, por ejemplo a 768px o 1024px, y ah\u00ed decidimos c\u00f3mo cambia el layout completo. Ese enfoque sigue funcionando, pero tiene una limitaci\u00f3n clara: asume que todos los componentes viven en el mismo contexto.<\/p>\n<p>En proyectos con sidebars, grids asim\u00e9tricos, m\u00f3dulos reutilizados en varias plantillas o bloques que pasan de una columna ancha a otra estrecha, esa suposici\u00f3n deja de ser fiable. El container no necesita saber cu\u00e1nto mide la pantalla; necesita saber cu\u00e1nto espacio recibe.<\/p>\n<p><strong>Media queries responden al entorno global; container queries responden al entorno local del componente.<\/strong><\/p>\n<\/section>\n<section>\n<h2>Qu\u00e9 son las media queries<\/h2>\n<p>Las media queries aplican estilos basados en caracter\u00edsticas del dispositivo o del viewport: anchura, altura, orientaci\u00f3n o tipo de medio. Son la base del responsive tradicional y siguen siendo la mejor herramienta para decisiones globales.<\/p>\n<ul>\n<li>Cambiar la estructura principal de la p\u00e1gina.<\/li>\n<li>Reorganizar cabecera, sidebar o footer.<\/li>\n<li>Adaptar navegaci\u00f3n, overlays o patrones dependientes de pantalla.<\/li>\n<\/ul>\n<\/section>\n<section>\n<h2>Qu\u00e9 son las container queries<\/h2>\n<p>Las container queries permiten aplicar estilos seg\u00fan el tama\u00f1o de un contenedor concreto. En lugar de tomar como referencia el viewport, toman el contenedor, normalmente con container-type: inline-size;.<\/p>\n<p>Eso permite que una misma card, un mismo m\u00f3dulo o una misma pieza de UI se comporte de forma distinta seg\u00fan el ancho real de la columna donde aparece. Es un cambio enorme para design systems y sitios basados en componentes.<\/p>\n<p><strong>Un componente reusable deja de depender de breakpoints globales \u201cprestados\u201d y gana autonom\u00eda dentro del layout.<\/strong><\/p>\n<\/section>\n<section>\n<h2>Diferencias clave<\/h2>\n<div class=\"table-wrap\">\n<table>\n<thead>\n<tr>\n<th><strong> Aspecto <\/strong><\/th>\n<th>Media queries<\/th>\n<th>Container queries<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Aspecto\"><strong>Qu\u00e9 miden<\/strong><\/td>\n<td data-label=\"Media queries\">Viewport o dispositivo<\/td>\n<td data-label=\"Container queries\">Contenedor del componente<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Aspecto\"><strong> Alcance <\/strong><\/td>\n<td data-label=\"Media queries\">Global<\/td>\n<td data-label=\"Container queries\">Local<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Aspecto\"><strong>Uso ideal<\/strong><\/td>\n<td data-label=\"Media queries\">Layout macro<\/td>\n<td data-label=\"Container queries\">M\u00f3dulos reutilizables<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Aspecto\"><strong>Riesgo t\u00edpico<\/strong><\/td>\n<td data-label=\"Media queries\">Breakpoints acoplados a una plantilla<\/td>\n<td data-label=\"Container queries\">Olvidar declarar correctamente el contenedor<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Aspecto\"><strong>Beneficio principal<\/strong><\/td>\n<td data-label=\"Media queries\">Simplicidad estructural<\/td>\n<td data-label=\"Container queries\">Autonom\u00eda del componente<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Cuando usamos media queries, preguntamos \u00bfDe qu\u00e9 tama\u00f1o es la pantalla?.<br \/>\nCuando usamos Container queries, preguntamos \u00bfCu\u00e1nto espacio tengo aqu\u00ed y ahora mismo?<\/strong><\/p>\n<\/div>\n<\/section>\n<section>\n<h2>Sintaxis comparada<\/h2>\n<p>La diferencia conceptual es grande, pero la sintaxis no resulta extra\u00f1a. Ese parecido hace que la curva de aprendizaje sea relativamente suave si ya trabajas con CSS moderno.<\/p>\n<div class=\"table-wrap\">\n<table>\n<thead>\n<tr>\n<th>Media query<\/th>\n<th>Container query<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Media query\">\n<pre><code>.card {\n  display: block;\n}\n\n@media (min-width: 768px) {\n  .card {\n    display: grid;\n    grid-template-columns: 220px 1fr;\n    gap: 1.5rem;\n  }\n}<\/code><\/pre>\n<\/td>\n<td data-label=\"Container query\">\n<pre><code>.card-wrapper {\n  container-type: inline-size;\n}\n\n.card {\n  display: block;\n}\n\n@container (min-width: 30rem) {\n  .card {\n    display: grid;\n    grid-template-columns: 220px 1fr;\n    gap: 1.5rem;\n  }\n}<\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/section>\n<section>\n<h2>Cu\u00e1ndo usar cada una<\/h2>\n<h3>Usa media queries cuando el cambio sea estructural<\/h3>\n<ul>\n<li>El layout general pasa de una columna a varias.<\/li>\n<li>La navegaci\u00f3n cambia de desktop a m\u00f3vil.<\/li>\n<li>Hay decisiones ligadas al viewport completo.<\/li>\n<\/ul>\n<h3>Usa container queries cuando el cambio sea interno al componente<\/h3>\n<ul>\n<li>Cards, grids internos, m\u00f3dulos de contenido o bloques reutilizados.<\/li>\n<li>Componentes que aparecen en zonas de ancho variable.<\/li>\n<li>Interfaces donde el mismo m\u00f3dulo vive en contextos muy distintos.<\/li>\n<\/ul>\n<\/section>\n<section>\n<h2>Estrategia recomendada hoy<\/h2>\n<p>La combinaci\u00f3n m\u00e1s s\u00f3lida no es elegir una tecnolog\u00eda y descartar la otra. Lo m\u00e1s sensato es usar media queries para el layout macro y container queries para la l\u00f3gica responsive interna de los componentes.<\/p>\n<p><strong>Una buena regla pr\u00e1ctica:<\/strong> si est\u00e1s dise\u00f1ando la p\u00e1gina, piensa en media queries; si est\u00e1s dise\u00f1ando un bloque reusable, piensa primero en container queries. Ese cambio de mentalidad ayuda a escribir CSS m\u00e1s escalable, legible y portable entre plantillas.<\/p>\n<p><strong>Patr\u00f3n \u00fatil: <\/strong>MQ para estructura, CQ para componentes. No compiten; se complementan.<\/p>\n<\/section>\n<p>[\/et_pb_text][et_pb_code _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<section><!-- [et_pb_line_break_holder] -->  <\/p>\n<h2>Demo clara: misma pantalla, distinto resultado<\/h2>\n<p><!-- [et_pb_line_break_holder] -->  <pee><!-- [et_pb_line_break_holder] -->    Haz la ventana ancha. Ver\u00e1s que la card con <code>@media<\/code> puede ponerse horizontal incluso dentro de una columna estrecha, porque escucha al viewport completo. La card con <code>@container<\/code> solo cambiar\u00e1 cuando su contenedor tenga espacio suficiente. <!\u2013- [et_pb_br_holder] -\u2013><!-- [et_pb_line_break_holder] -->    <strong>NOTA: Para ver la diferencia ser\u00e1 necesario que veas esta p\u00e1gina en Desktop, o mira el comportamiento en la foto del post.<\/strong><!-- [et_pb_line_break_holder] -->  <\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <\/p>\n<style><!-- [et_pb_line_break_holder] -->    * { box-sizing: border-box; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    section {<!-- [et_pb_line_break_holder] -->      padding: 2rem;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .demo-layout {<!-- [et_pb_line_break_holder] -->      display: grid;<!-- [et_pb_line_break_holder] -->      grid-template-columns: 2fr 0.9fr;<!-- [et_pb_line_break_holder] -->      gap: 2rem;<!-- [et_pb_line_break_holder] -->      align-items: start;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .column {<!-- [et_pb_line_break_holder] -->      padding: 1rem;<!-- [et_pb_line_break_holder] -->      border: 1px solid #ddd;<!-- [et_pb_line_break_holder] -->      border-radius: 16px;<!-- [et_pb_line_break_holder] -->      background: #f8f8f8;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .column h3 {<!-- [et_pb_line_break_holder] -->      margin: 0 0 0.75rem;<!-- [et_pb_line_break_holder] -->      font-size: 1rem;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .column p {<!-- [et_pb_line_break_holder] -->      margin: 0 0 1rem;<!-- [et_pb_line_break_holder] -->      line-height: 1.5;<!-- [et_pb_line_break_holder] -->      color: #555;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .card {<!-- [et_pb_line_break_holder] -->      display: grid;<!-- [et_pb_line_break_holder] -->      grid-template-columns: 1fr;<!-- [et_pb_line_break_holder] -->      gap: 1rem;<!-- [et_pb_line_break_holder] -->      padding: 1rem;<!-- [et_pb_line_break_holder] -->      border: 1px solid #d8d8d8;<!-- [et_pb_line_break_holder] -->      border-radius: 16px;<!-- [et_pb_line_break_holder] -->      background: #fff;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .card img {<!-- [et_pb_line_break_holder] -->      width: 100%;<!-- [et_pb_line_break_holder] -->      height: auto;<!-- [et_pb_line_break_holder] -->      aspect-ratio: 16 \/ 10;<!-- [et_pb_line_break_holder] -->      object-fit: cover;<!-- [et_pb_line_break_holder] -->      display: block;<!-- [et_pb_line_break_holder] -->      border-radius: 12px;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .card h4 {<!-- [et_pb_line_break_holder] -->      margin: 0 0 0.5rem;<!-- [et_pb_line_break_holder] -->      font-size: 1.15rem;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .card p {<!-- [et_pb_line_break_holder] -->      margin: 0 0 1rem;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    .card a {<!-- [et_pb_line_break_holder] -->      display: inline-block;<!-- [et_pb_line_break_holder] -->      text-decoration: none;<!-- [et_pb_line_break_holder] -->      background: #0b6b6f;<!-- [et_pb_line_break_holder] -->      color: #fff;<!-- [et_pb_line_break_holder] -->      padding: 0.7rem 1rem;<!-- [et_pb_line_break_holder] -->      border-radius: 999px;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/* CARD CON MEDIA QUERY *\/<!-- [et_pb_line_break_holder] -->    @media (min-width: 900px) {<!-- [et_pb_line_break_holder] -->      .card-media {<!-- [et_pb_line_break_holder] -->        grid-template-columns: 220px 1fr;<!-- [et_pb_line_break_holder] -->        align-items: center;<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      .card-media img {<!-- [et_pb_line_break_holder] -->        height: 100%;<!-- [et_pb_line_break_holder] -->        min-height: 180px;<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/* CARD CON CONTAINER QUERY *\/<!-- [et_pb_line_break_holder] -->    .container-box {<!-- [et_pb_line_break_holder] -->      container-type: inline-size;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    @container (min-width: 500px) {<!-- [et_pb_line_break_holder] -->      .card-container {<!-- [et_pb_line_break_holder] -->        grid-template-columns: 220px 1fr;<!-- [et_pb_line_break_holder] -->        align-items: center;<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      .card-container img {<!-- [et_pb_line_break_holder] -->        height: 100%;<!-- [et_pb_line_break_holder] -->        min-height: 180px;<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    @media (max-width: 900px) {<!-- [et_pb_line_break_holder] -->      .demo-layout {<!-- [et_pb_line_break_holder] -->        grid-template-columns: 1fr;<!-- [et_pb_line_break_holder] -->      }<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  <\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"demo-layout\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"column\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<h3>Columna ancha \u00b7 CARD CON MEDIA QUERIES<\/h3>\n<p><!-- [et_pb_line_break_holder] -->      <pee><!-- [et_pb_line_break_holder] -->        Esta funciona \u201cbien\u201d porque el viewport es ancho y adem\u00e1s la columna tambi\u00e9n lo es. El problema aparece cuando reutilizas la misma card en una columna estrecha.<!-- [et_pb_line_break_holder] -->      <\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      <\/p>\n<article class=\"card card-media\"><!-- [et_pb_line_break_holder] -->        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/06\/ejemplo.webp\" alt=\"Card con media queries en columna ancha\" width=\"800\" height=\"500\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div><!-- [et_pb_line_break_holder] -->          <\/p>\n<h4>CARD CON MEDIA QUERIES<\/h4>\n<p><!-- [et_pb_line_break_holder] -->          <pee><!-- [et_pb_line_break_holder] -->            Cambia a layout horizontal cuando la ventana supera 900px, no cuando esta card tenga espacio real. <!-- [et_pb_line_break_holder] -->          <\/pee><!-- [et_pb_line_break_holder] -->          <a href=\"#\">Leer m\u00e1s<\/a><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/article>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"column\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<h3>Columna estrecha \u00b7 MISMA L\u00d3GICA CON MEDIA QUERIES<\/h3>\n<p><!-- [et_pb_line_break_holder] -->      <pee><!-- [et_pb_line_break_holder] -->        Si aqu\u00ed metieras otra card con <code>@media<\/code>, tambi\u00e9n intentar\u00eda ponerse horizontal en escritorio, aunque esta columna sea demasiado estrecha. Ese es justo el problema de acoplarla al viewport.<!-- [et_pb_line_break_holder] -->      <\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      <\/p>\n<article class=\"card card-media\"><!-- [et_pb_line_break_holder] -->        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/06\/ejemplo.webp\" alt=\"Card con media queries en columna estrecha\" width=\"800\" height=\"500\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div><!-- [et_pb_line_break_holder] -->          <\/p>\n<h4>MEDIA QUERY EN COLUMNA ESTRECHA<\/h4>\n<p><!-- [et_pb_line_break_holder] -->          <pee><!-- [et_pb_line_break_holder] -->            Como escucha a la ventana completa, puede forzar una disposici\u00f3n horizontal antes de tiempo. <!-- [et_pb_line_break_holder] -->          <\/pee><!-- [et_pb_line_break_holder] -->          <a href=\"#\">Leer m\u00e1s<\/a><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/article>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <!\u2013- [et_pb_br_holder] -\u2013><!\u2013- [et_pb_br_holder] -\u2013><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  <\/p>\n<div class=\"demo-layout\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"column container-box\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<h3>Columna ancha \u00b7 CARD CON CONTAINER QUERIES<\/h3>\n<p><!-- [et_pb_line_break_holder] -->      <pee><!-- [et_pb_line_break_holder] -->        Aqu\u00ed la card s\u00ed se pone horizontal, pero solo porque su contenedor realmente tiene ancho suficiente.<!-- [et_pb_line_break_holder] -->      <\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      <\/p>\n<article class=\"card card-container\"><!-- [et_pb_line_break_holder] -->        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/06\/ejemplo.webp\" alt=\"Card con container queries en columna ancha\" width=\"800\" height=\"500\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div><!-- [et_pb_line_break_holder] -->          <\/p>\n<h4>CARD CON CONTAINER QUERIES<\/h4>\n<p><!-- [et_pb_line_break_holder] -->          <pee><!-- [et_pb_line_break_holder] -->            Esta responde al ancho de su caja padre, no al del navegador completo. <!-- [et_pb_line_break_holder] -->          <\/pee><!-- [et_pb_line_break_holder] -->          <a href=\"#\">Leer m\u00e1s<\/a><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/article>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"column container-box\"><!-- [et_pb_line_break_holder] -->      <\/p>\n<h3>Columna estrecha \u00b7 MISMA CARD CON CONTAINER QUERIES<\/h3>\n<p><!-- [et_pb_line_break_holder] -->      <pee><!-- [et_pb_line_break_holder] -->        Aunque la ventana sea grande, esta card seguir\u00e1 apilada si su contenedor no alcanza 500px. Por eso resulta mucho m\u00e1s reusable en sidebars, widgets y grids mixtos. <!-- [et_pb_line_break_holder] -->      <\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->      <\/p>\n<article class=\"card card-container\"><!-- [et_pb_line_break_holder] -->        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/06\/ejemplo.webp\" alt=\"Card con container queries en columna estrecha\" width=\"800\" height=\"500\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div><!-- [et_pb_line_break_holder] -->          <\/p>\n<h4>CONTAINER QUERY EN COLUMNA ESTRECHA<\/h4>\n<p><!-- [et_pb_line_break_holder] -->          <pee><!-- [et_pb_line_break_holder] -->            El componente se adapta a su contexto real y evita comportamientos rotos al reutilizarlo. <!-- [et_pb_line_break_holder] -->          <\/pee><!-- [et_pb_line_break_holder] -->          <a href=\"#\">Leer m\u00e1s<\/a><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->      <\/article>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->  <\/div>\n<p><!-- [et_pb_line_break_holder] --><\/section>\n<p>[\/et_pb_code][et_pb_text _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<section>\n<h2>M\u00e1s<\/h2>\n<p><strong>Si quieres m\u00e1s informaci\u00f3n<\/strong> sobre este tema y otros relacionados, te sugiero estos sitios:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/Guides\/Containment\/Container_queries\" target=\"_blank\" rel=\"noopener\">MDN Web Docs &#8211; Gu\u00eda de Container Queries<\/a><\/li>\n<li><a href=\"https:\/\/web.dev\/case-studies\/netflix-cq\" target=\"_blank\" rel=\"noopener\">Web.dev (Google) &#8211; El poder de las Container Queries<\/a><\/li>\n<li><a href=\"https:\/\/www.freecodecamp.org\/news\/media-queries-vs-container-queries\/\" target=\"_blank\" rel=\"noopener\">FreeCodeCamp &#8211; Media Queries vs Container Queries<\/a><\/li>\n<li><a href=\"https:\/\/www.gloobs.com\/blog\/diseno-adaptativo-disenar-en-funcion-de-cada-usuario\/\"><strong>Dise\u00f1o adaptativo: dise\u00f1ar en funci\u00f3n del comportamiento de cada usuario<\/strong><\/a><\/li>\n<\/ul>\n<\/section>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Container queries vs media queries Las media queries siguen siendo esenciales para la estructura general de una interfaz, pero las container queries resuelven un problema que llevaba a\u00f1os arrastr\u00e1ndose en sistemas modulares: hacer que un componente responda al espacio que realmente tiene, no al tama\u00f1o global de la ventana. Del viewport al componente El responsive [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1157,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[111,4],"tags":[115,9,112,114,117,116,24,113],"class_list":["post-1123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-ux-ui","tag-componentsmedia","tag-css","tag-css3","tag-diseno-responsivo","tag-queries","tag-queriescontainer","tag-responsive","tag-responsive-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Container queries vs media queries \u00bfQu\u00e9 usar y cu\u00e1ndo? - Gloobs, dise\u00f1o, UX, UI<\/title>\n<meta name=\"description\" content=\"Container queries vs media queries en CSS: aprende cu\u00e1ndo usar cada una, c\u00f3mo afectan al responsive y c\u00f3mo combinarlas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Container queries vs media queries \u00bfQu\u00e9 usar y cu\u00e1ndo? - Gloobs, dise\u00f1o, UX, UI\" \/>\n<meta property=\"og:description\" content=\"Container queries vs media queries en CSS: aprende cu\u00e1ndo usar cada una, c\u00f3mo afectan al responsive y c\u00f3mo combinarlas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/\" \/>\n<meta property=\"og:site_name\" content=\"Gloobs, dise\u00f1o, UX, UI\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-03T15:22:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-09T13:30:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/06\/container-queries-vs-media-queries.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"494\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#\\\/schema\\\/person\\\/e610ada66c75e5e6d72b316f3891e967\"},\"headline\":\"Container queries vs media queries \u00bfQu\u00e9 usar y cu\u00e1ndo?\",\"datePublished\":\"2026-06-03T15:22:35+00:00\",\"dateModified\":\"2026-06-09T13:30:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/\"},\"wordCount\":1053,\"publisher\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#\\\/schema\\\/person\\\/e610ada66c75e5e6d72b316f3891e967\"},\"image\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/container-queries-vs-media-queries.webp\",\"keywords\":[\"ComponentsMedia\",\"CSS\",\"CSS3\",\"dise\u00f1o responsivo\",\"Queries\",\"QueriesContainer\",\"responsive\",\"responsive design\"],\"articleSection\":[\"CSS\",\"UX \\\/ UI\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/\",\"url\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/\",\"name\":\"Container queries vs media queries \u00bfQu\u00e9 usar y cu\u00e1ndo? - Gloobs, dise\u00f1o, UX, UI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/container-queries-vs-media-queries.webp\",\"datePublished\":\"2026-06-03T15:22:35+00:00\",\"dateModified\":\"2026-06-09T13:30:12+00:00\",\"description\":\"Container queries vs media queries en CSS: aprende cu\u00e1ndo usar cada una, c\u00f3mo afectan al responsive y c\u00f3mo combinarlas.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/container-queries-vs-media-queries.webp\",\"contentUrl\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/container-queries-vs-media-queries.webp\",\"width\":1440,\"height\":494},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/container-queries-vs-media-queries\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Container queries vs media queries \u00bfQu\u00e9 usar y cu\u00e1ndo?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/\",\"name\":\"Gloobs, dise\u00f1o digital, UX, UI\",\"description\":\"Un blog sobre dise\u00f1o UX\\\/UI que baja a tierra los conceptos de experiencia de usuario y dise\u00f1o de interfaces con ejemplos reales, gu\u00edas pr\u00e1cticas y an\u00e1lisis de tendencias. Aqu\u00ed encontrar\u00e1s recursos para crear productos digitales m\u00e1s claros, bonitos y efectivos: desde estructuras de p\u00e1gina y patrones de interacci\u00f3n hasta tipograf\u00eda, color, microcopy y casos de estudio completos orientados a mejorar la usabilidad y las conversiones.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#\\\/schema\\\/person\\\/e610ada66c75e5e6d72b316f3891e967\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/#\\\/schema\\\/person\\\/e610ada66c75e5e6d72b316f3891e967\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g\"},\"sameAs\":[\"https:\\\/\\\/www.gloobs.com\\\/blog\"],\"url\":\"https:\\\/\\\/www.gloobs.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Container queries vs media queries \u00bfQu\u00e9 usar y cu\u00e1ndo? - Gloobs, dise\u00f1o, UX, UI","description":"Container queries vs media queries en CSS: aprende cu\u00e1ndo usar cada una, c\u00f3mo afectan al responsive y c\u00f3mo combinarlas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/","og_locale":"es_ES","og_type":"article","og_title":"Container queries vs media queries \u00bfQu\u00e9 usar y cu\u00e1ndo? - Gloobs, dise\u00f1o, UX, UI","og_description":"Container queries vs media queries en CSS: aprende cu\u00e1ndo usar cada una, c\u00f3mo afectan al responsive y c\u00f3mo combinarlas.","og_url":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/","og_site_name":"Gloobs, dise\u00f1o, UX, UI","article_published_time":"2026-06-03T15:22:35+00:00","article_modified_time":"2026-06-09T13:30:12+00:00","og_image":[{"width":1440,"height":494,"url":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/06\/container-queries-vs-media-queries.webp","type":"image\/webp"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"admin","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/#article","isPartOf":{"@id":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/"},"author":{"name":"admin","@id":"https:\/\/www.gloobs.com\/blog\/#\/schema\/person\/e610ada66c75e5e6d72b316f3891e967"},"headline":"Container queries vs media queries \u00bfQu\u00e9 usar y cu\u00e1ndo?","datePublished":"2026-06-03T15:22:35+00:00","dateModified":"2026-06-09T13:30:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/"},"wordCount":1053,"publisher":{"@id":"https:\/\/www.gloobs.com\/blog\/#\/schema\/person\/e610ada66c75e5e6d72b316f3891e967"},"image":{"@id":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/06\/container-queries-vs-media-queries.webp","keywords":["ComponentsMedia","CSS","CSS3","dise\u00f1o responsivo","Queries","QueriesContainer","responsive","responsive design"],"articleSection":["CSS","UX \/ UI"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/","url":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/","name":"Container queries vs media queries \u00bfQu\u00e9 usar y cu\u00e1ndo? - Gloobs, dise\u00f1o, UX, UI","isPartOf":{"@id":"https:\/\/www.gloobs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/#primaryimage"},"image":{"@id":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/06\/container-queries-vs-media-queries.webp","datePublished":"2026-06-03T15:22:35+00:00","dateModified":"2026-06-09T13:30:12+00:00","description":"Container queries vs media queries en CSS: aprende cu\u00e1ndo usar cada una, c\u00f3mo afectan al responsive y c\u00f3mo combinarlas.","breadcrumb":{"@id":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/#primaryimage","url":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/06\/container-queries-vs-media-queries.webp","contentUrl":"https:\/\/www.gloobs.com\/blog\/wp-content\/uploads\/2026\/06\/container-queries-vs-media-queries.webp","width":1440,"height":494},{"@type":"BreadcrumbList","@id":"https:\/\/www.gloobs.com\/blog\/container-queries-vs-media-queries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.gloobs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Container queries vs media queries \u00bfQu\u00e9 usar y cu\u00e1ndo?"}]},{"@type":"WebSite","@id":"https:\/\/www.gloobs.com\/blog\/#website","url":"https:\/\/www.gloobs.com\/blog\/","name":"Gloobs, dise\u00f1o digital, UX, UI","description":"Un blog sobre dise\u00f1o UX\/UI que baja a tierra los conceptos de experiencia de usuario y dise\u00f1o de interfaces con ejemplos reales, gu\u00edas pr\u00e1cticas y an\u00e1lisis de tendencias. Aqu\u00ed encontrar\u00e1s recursos para crear productos digitales m\u00e1s claros, bonitos y efectivos: desde estructuras de p\u00e1gina y patrones de interacci\u00f3n hasta tipograf\u00eda, color, microcopy y casos de estudio completos orientados a mejorar la usabilidad y las conversiones.","publisher":{"@id":"https:\/\/www.gloobs.com\/blog\/#\/schema\/person\/e610ada66c75e5e6d72b316f3891e967"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gloobs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/www.gloobs.com\/blog\/#\/schema\/person\/e610ada66c75e5e6d72b316f3891e967","name":"admin","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g","caption":"admin"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/2fe738fddd22191bad283fef17e71182f7d794f1a3e868319cf08c73d684075e?s=96&d=mm&r=g"},"sameAs":["https:\/\/www.gloobs.com\/blog"],"url":"https:\/\/www.gloobs.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/posts\/1123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/comments?post=1123"}],"version-history":[{"count":28,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/posts\/1123\/revisions"}],"predecessor-version":[{"id":1268,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/posts\/1123\/revisions\/1268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/media\/1157"}],"wp:attachment":[{"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/media?parent=1123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/categories?post=1123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gloobs.com\/blog\/wp-json\/wp\/v2\/tags?post=1123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}