如何使用CSS Container Queries适配卡片组件-css教程-PHP中文网

container queries 与 media queries 的本质区别在于响应依据不同：前者基于父容器尺寸，后者基于视口宽度；container queries 实现组件级响应式，使同一组件在侧边栏、主区或弹窗中能根据实际容器宽度自动适配布局，而 media queries 无法感知容器环境变化。

如何使用css container queries适配卡片组件

Container Queries 和 media queries 本质区别在哪

Container Queries 不是媒体查询的升级版，它不看视口宽度，而是看容器自身尺寸。卡片组件常嵌套在不同宽度的栅格、侧边栏或弹窗里，media 查询只能响应整个屏幕变化，而 @container 才能真正让单个卡片“感知”自己被塞进了多宽的父容器里。

关键前提：必须给卡片的直接父元素显式声明 container-type，否则所有 @container 规则都会静默失效。

父容器没设 container-type: inline-size → 卡片里的 @container (min-width: 300px) 完全不触发
container-name 可选，但命名后能避免规则污染（尤其多个卡片共用同一父容器时）
不能写在 <style></style> 标签外（比如 HTML 内联 style），必须在 CSS 文件或 <style></style> 块内

给卡片组件写一个可缩放的标题行布局

常见需求：卡片标题在窄容器中显示为单行，在宽容器中显示为两行并加副标题。用 @container 比用 JS 监听 resize 或一堆 @media 更轻量、更解耦。

假设卡片结构是：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div class="card-container">
  <article class="card"><h3 class="card-title">标题</h3>
  </article>
</div>

对应 CSS：

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

@container card (min-width: 320px) {
  .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@container card (min-width: 480px) {
  .card-title::after {
    content: " — 副标题";
    font-size: 0.8em;
    color: #666;
  }
}

@container 后面跟的是容器名（card）而非选择器，名字必须和 container-name 一致
单位统一用 px，不要混用 em 或 rem——容器查询目前只支持 px、%（仅用于 aspect-ratio）等有限单位
伪元素 ::after 在容器查询中可用，但注意它受容器尺寸限制，超出部分会被裁剪

为什么卡片内图片没随容器缩放

图片默认不响应 @container，因为 <img> 是替换元素，其尺寸由自身 intrinsic size 或显式 width 控制。想让它随容器变，得主动干预。

给图片加 width: 100% + height: auto 是基础，否则它卡死在原始像素宽
如果卡片有 padding，图片会撑满内容区，但可能溢出；建议用 box-sizing: border-box 确保 padding 不影响 width 计算
避免对 <img> 直接写 max-width: 100% —— 它只在块级上下文中生效，而容器查询作用域内需明确设置 display: block
若用 background-image，记得配合 background-size: cover 和 aspect-ratio 控制缩放行为