HTML中如何使用@container实现容器查询-html教程-PHP中文网

容器查询必须显式声明container-type（如inline-size）才能生效，否则@container规则静默失效；条件语法需用width >= 400px等函数形式，不支持min-width等声明式写法。

html中如何使用@container实现容器查询

容器查询需要先启用 container 属性

原生 CSS 容器查询（@container）不会自动生效，必须显式给父元素标记 container 或 container-type。浏览器默认不把任何元素视为容器，这点和媒体查询完全不同。

常见错误是写了 @container (min-width: 400px) { ... } 却没生效——大概率是因为父级缺少声明。

container: name type：同时指定名称和类型（如 container: card / inline-size）
container-type: inline-size：最常用，按宽度响应（块级方向尺寸）
container-type: size：需同时满足宽高约束，且元素必须有明确尺寸（如设了 width 和 height），否则查不到
命名容器（container: sidebar）可用于 @container sidebar (min-width: 300px)，但仅限显式匹配，不支持通配或继承

@container 中的条件语法和媒体查询不同

@container 的条件括号内不能直接写 min-width: 400px 这类声明，必须用函数形式，比如 width >= 400px，而且只支持 width、height、inline-size、block-size 四个逻辑属性（取决于 container-type 设置）。

例如：container-type: inline-size 时，只能用 width 或 inline-size；设为 size 才能用 height。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

错误写法：@container (min-width: 400px) { ... } → 浏览器直接忽略整个规则
正确写法：@container (width >= 400px) { ... }
支持比较符：>、>=、、<code>、<code>==（注意是双等号），不支持 and/or 组合，多条件需嵌套或用 container-name 分离
单位必须带（如 400px、50%），不支持无单位数值

container-type: inline-size 是最稳妥的起步选择

多数卡片、网格项、侧边栏等场景只需响应容器宽度变化，inline-size 类型兼容性好、行为可预测，且不要求父元素有固定尺寸——它基于内容流方向的可用宽度计算，即使父元素是 flex 或 grid 子项也能工作。

相比之下，container-type: size 要求元素自身设置了 width 和 height（或由布局强制出确定尺寸），否则查询始终返回 0，导致条件永不匹配。

Flex 项目中：直接加 container-type: inline-size 即可，无需额外设置 min-width 等
Grid 项目中：同上，但注意 grid-template-columns 若用了 auto-fit + minmax()，容器宽度会动态变化，@container 能实时响应
绝对定位/浮动元素：不推荐设为容器，其尺寸计算逻辑不稳定，容易触发“未定义容器”警告