组件宽度为600px时的条件样式设置问题（非屏幕宽度判断）

原来的@media是基于视口（屏幕）宽度的媒体查询，自然没法满足「组件自身宽度变化时切换样式」的需求。你可以用CSS容器查询来实现，不用新增组件，直接修改现有styled代码就行：

const wrapper = styled.div`
  display: flex;
  flex-direction: column;
  /* 声明当前元素为容器查询的上下文，基于内联尺寸（即宽度） */
  container-type: inline-size;

  /* 当容器自身宽度 ≤600px 时，切换flex方向 */
  @container (max-width: 600px) {
    flex-direction: row-reverse;
  }
`

说明： #

• container-type: inline-size：告诉浏览器这个元素是一个容器查询的基准，后续的@container规则会基于这个元素的自身宽度来判断条件是否满足。
• @container (max-width: 600px)：替代原来的@media，这里的宽度判断是针对当前wrapper组件自身的，而非屏幕宽度。

目前主流浏览器（Chrome、Firefox、Edge）都已经支持容器查询，无需额外依赖。

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