CSS 容器查询落地：从媒体查询迁移到组件级响应式的实际踩坑记录

媒体查询一直是前端做响应式布局的主要手段，但它绑的是视口宽度，不是组件实际可用的空间。这个限制在组件库里特别明显：同一个卡片组件放在全宽主栏和窄侧边栏里，视口宽度一样，但组件需要的布局完全不同。之前遇到一个后台项目，侧边栏折叠后主内容区变宽，卡片却还是按视口断点显示单列，看起来特别空。容器查询（Container Queries）就是解决这个问题的：让组件根据自身容器的尺寸来切换样式，而不是看整个