当组件需根据其直接父容器（而非视口）宽度动态切换样式时，css 容器查询（container queries）是现代、标准且语义清晰的解决方案，可完美替代基于视口的媒体查询，适用于嵌入式小部件等场景。
当组件需根据其直接父容器（而非视口）宽度动态切换样式时，css 容器查询（container queries）是现代、标准且语义清晰的解决方案，可完美替代基于视口的媒体查询，适用于嵌入式小部件等场景。
传统媒体查询（如 @media (max-width: 768px)）依赖视口宽度，无法感知组件所处的局部容器尺寸——这正是您当前遇到的瓶颈：您的 .bstfbt__price-cta 小部件在桌面端嵌入窄栏（如侧边栏、卡片内、CMS 内容区）时，仍会强制显示桌面样式，破坏体验。
✅ 正确解法：使用 CSS 容器查询（Container Queries）
它允许您为具有明确容器上下文（container context）的祖先元素定义尺寸条件，并让子元素据此响应。浏览器通过 container-type 属性声明容器能力，再用 @container 规则编写条件样式。
? 实现步骤如下：
为父容器启用容器上下文
在小部件的直接父元素（例如<div class="widget-container">）上添加：<pre class="brush:php;toolbar:false;">.widget-container { container-type: inline-size; /* 基于宽度的容器查询（推荐） */ /* 或 container-type: size; —— 同时响应宽高（需配合 container-name） */ }</pre> <li> <p><strong>用 <code>@container替代@media编写响应规则
将原移动样式逻辑迁移至容器查询中：/* 当父容器宽度 ≤ 768px 时，启用移动端布局 */ @container (max-width: 768px) { .bstfbt__price-cta--desktop { display: none; } .bstfbt__price-cta--mobile { align-self: center; } .bstfbt__price-cta--mobile > div { align-items: center; } } /* 当父容器宽度 > 768px 时，隐藏移动端结构 */ @container (min-width: 769px) { .bstfbt__price-cta--mobile { display: none; } }- 容器查询不继承，必须显式为最近的、有尺寸约束的祖先设置
container-type； -
inline-size是最常用类型，对应水平尺寸（即常规的“宽度”），无需指定container-name； - 浏览器支持已非常成熟（Chrome 105+、Firefox 110+、Safari 16.4+），caniuse 数据显示全球主流浏览器覆盖率超 95%，但若需兼容 IE 或 Safari
- 不要将
container-type设在或无明确尺寸限制的块上（如未设width/max-width的div），否则容器上下文可能无效。
⚠️ 注意事项：
? 进阶提示：
若同一页面存在多个同类小部件且需独立响应，可结合 container-name 实现精准控制：
.widget-container-price {
container-type: inline-size;
container-name: price-widget;
}
@container price-widget (max-width: 480px) { /* 仅作用于命名容器 */ }
总结：容器查询让响应式逻辑回归组件本身，真正实现「哪里嵌入，就在哪里适配」。对于可复用、嵌入式 UI 小部件（如价格按钮、订阅表单、评分组件），它是比视口媒体查询更合理、更可维护的技术选择。
