如何让小容器中的响应式Widget在桌面端应用移动端CSS规则？

要实现父容器尺寸触发样式切换（而非屏幕宽度），你需要用**CSS容器查询（Container Queries）**替代原有的媒体查询，具体实现步骤如下：

1. 给父容器添加容器查询上下文 #

先给Widget的目标父容器（你希望作为尺寸判断依据的父元素）添加容器类型声明，让浏览器识别它为容器查询的参考对象：

.bstfbt__container {
  /* 声明容器的尺寸参考方向为内联维度（即宽度） */
  container-type: inline-size;
  /* 可选：给容器命名，后续可精准指定查询目标，避免冲突 */
  container-name: bstfbt-widget;
}

2. 将媒体查询替换为容器查询 #

把原来基于屏幕宽度的@media规则，替换为基于父容器宽度的@container规则：

/* 父容器宽度≤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: 768px) {
  .bstfbt__price-cta--mobile {
    display: none;
  }
}

如果给容器命名了，也可以用@container bstfbt-widget (max-width: 768px)的写法，确保样式只针对目标容器生效，避免和页面其他容器查询冲突。

3. 旧浏览器兼容方案（可选） #

若需兼容不支持容器查询的旧浏览器（如IE、部分老版本Chrome/Firefox），可通过JavaScript监听父容器宽度变化，动态给Widget添加/移除样式类：

const widgetContainer = document.querySelector('.bstfbt__container');
const widget = document.querySelector('.your-widget-root-class');

function updateWidgetLayout() {
  const containerWidth = widgetContainer.offsetWidth;
  if (containerWidth <= 768) {
    widget.classList.add('bstfbt--mobile');
    widget.classList.remove('bstfbt--desktop');
  } else {
    widget.classList.add('bstfbt--desktop');
    widget.classList.remove('bstfbt--mobile');
  }
}

// 初始化执行一次
updateWidgetLayout();
// 监听窗口 resize 事件
window.addEventListener('resize', updateWidgetLayout);
// 若容器尺寸可能因DOM操作改变，可添加MutationObserver监听容器样式/结构变化

对应修改CSS规则：

.bstfbt--mobile .bstfbt__price-cta--desktop {
  display: none;
}

.bstfbt--mobile .bstfbt__price-cta--mobile {
  align-self: center;
}

.bstfbt--mobile .bstfbt__price-cta--mobile > div {
  align-items: center;
}

.bstfbt--desktop .bstfbt__price-cta--mobile {
  display: none;
}

内容的提问来源于stack exchange，提问作者Yaman