CSS Container Query 参考

Container Query 允许组件根据容器尺寸而不是视口尺寸调整样式，适合复用卡片、侧栏、信息块和嵌入式组件。

语法

css

.card-shell {
  container-type: inline-size;
}

@container (min-width: 420px) {
  .card {
    grid-template-columns: 120px 1fr;
  }
}

常用属性

属性或规则	说明
`container-type`	声明容器查询类型
`container-name`	给容器命名
`container`	简写属性
`@container`	编写容器查询规则

可运行演示

在线代码演示

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>container query 卡片演示</title>
    <style>
      body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; }
      .shell { container-type: inline-size; width: min(100%, 680px); margin: 0 auto; resize: horizontal; overflow: auto; padding: 8px; border: 1px dashed #93c5fd; }
      .card { display: grid; gap: 12px; padding: 16px; border-radius: 12px; background: #fff; border: 1px solid #dbeafe; }
      .media { min-height: 120px; border-radius: 10px; background: linear-gradient(135deg, #bfdbfe, #2563eb); }
      h1 { margin: 0; font-size: 20px; }
      p { margin: 6px 0 0; color: #475569; }
      @container (min-width: 480px) {
        .card { grid-template-columns: 180px 1fr; align-items: center; }
      }
    </style>
  </head>
  <body>
    <div class="shell">
      <article class="card">
        <div class="media"></div>
        <div><h1>容器查询卡片</h1><p>拖动外层容器宽度，卡片会从单列切换成图文两列。</p></div>
      </article>
    </div>
  </body>
</html>

常见错误

没有在父级设置 container-type，导致 @container 不生效。
把容器查询当成媒体查询替代品；页面级布局仍然适合 media query。
查询条件写在被查询元素自身上，实际应该查询其容器。

CSS Container Query 参考

语法

常用属性

可运行演示

常见错误

相关内容

相关内容