容器查询
CSS特性，允许组件根据自身所在容器的尺寸而非视口宽度来调整样式，使组件在不同布局位置自动适配，强化内容与样式分离理念
时间轴 (近 90 天)
在没有定义容器的情况下，cqi 单位会回退到视口尺寸，因此使用 cqi 的同一段代码在视口和容器两种场景下都能工作。
container-type: inline-size 使元素在行内方向上成为可查询的容器，子元素可以使用 cqw、cqi 等单位；container-type: size 同时建立行内和块级尺寸 containment，支持 cqh、cqb 等块级单位。
容器查询（Container Queries）于 2023 年在主流浏览器中全面可用，核心是 @container 规则配合 container-type 属性。
容器查询允许组件根据父容器尺寸而非视口尺寸调整内部样式，提升组件上下文无关的可复用性。
启用容器查询需要在父元素上声明 container-type: inline-size（或同时指定 container-name）
在 wrapper 直接子元素上重新声明已注册的长度类型属性 --step-2，会将字号计算基准固定在 wrapper 的容器尺寸上，从而保证跨容器字号一致
容器查询内联单位 cqi 等同于容器内联尺寸的 1%，只有找到最近的已声明容器时才参照该容器，否则退回参照视口
若不显式声明容器，容器查询单位会退而参照视口，产生与使用视口单位完全相同的拉伸区问题
当多个元素各自被声明为容器时，相同的字号声明会因参照各自容器尺寸而渲染出不同字号
全部知识事实 (9)
在没有定义容器的情况下，cqi 单位会回退到视口尺寸，因此使用 cqi 的同一段代码在视口和容器两种场景下都能工作。
50%待验证container-type: inline-size 使元素在行内方向上成为可查询的容器，子元素可以使用 cqw、cqi 等单位；container-type: size 同时建立行内和块级尺寸 containment，支持 cqh、cqb 等块级单位。
50%待验证容器查询（Container Queries）于 2023 年在主流浏览器中全面可用，核心是 @container 规则配合 container-type 属性。
50%待验证容器查询允许组件根据父容器尺寸而非视口尺寸调整内部样式，提升组件上下文无关的可复用性。
50%待验证启用容器查询需要在父元素上声明 container-type: inline-size（或同时指定 container-name）
50%待验证在 wrapper 直接子元素上重新声明已注册的长度类型属性 --step-2，会将字号计算基准固定在 wrapper 的容器尺寸上，从而保证跨容器字号一致
50%待验证容器查询内联单位 cqi 等同于容器内联尺寸的 1%，只有找到最近的已声明容器时才参照该容器，否则退回参照视口
50%待验证若不显式声明容器，容器查询单位会退而参照视口，产生与使用视口单位完全相同的拉伸区问题
50%待验证当多个元素各自被声明为容器时，相同的字号声明会因参照各自容器尺寸而渲染出不同字号
50%