CSS容器查询实时演示器
拖动可调整宽度的容器，实时观察内部元素样式随容器宽度（而非视口宽度）变化，直观演示@container容器查询的效果与语法。
使用说明
1. 拖动页面中「容器宽度」滑块，或直接用鼠标/触摸拖动虚线框内容器右侧的紫色拖拽条，改变演示容器的宽度。
2. 容器内部的卡片网格使用真实的 @container CSS 规则：容器宽度小于 300px 时单列展示，300px 到 500px 之间两列展示，超过 500px 三列展示，布局会跟随容器宽度实时变化，与浏览器窗口本身的宽度无关——即使把整个页面拉得很宽，只要这个容器本身窄，内部依旧是单列布局。
3. 页面上方会实时显示当前容器宽度数值和命中的断点说明文字。
4. 「对应的 CSS 代码」区展示了实现该效果的完整 CSS 代码（container-type、container-name、@container 规则），可直接参考复制到自己项目中使用。
5. 点击「加载示例数据」会自动依次把容器宽度设为 200px → 350px → 650px → 420px，快速演示三种断点的切换效果。
功能介绍
本工具是一个交互式的 CSS Container Query（容器查询）教学演示工具：提供一个可拖动调整宽度的容器，容器内部元素用真实的 @container 规则写了三条响应式样式（宽度 < 300px 单列、300px~500px 两列、> 500px 三列），拖动容器宽度即可实时看到内部布局随容器宽度变化，而不是随浏览器视口宽度变化。
与站内已有的「Web 特性检测工具」定位不同：Web 特性检测工具是能力检测类工具，用于判断当前浏览器是否支持 Container Query 等新特性；本工具则是交互式教学演示工具，面向已经知道浏览器支持该特性、但想直观理解「容器查询和媒体查询的区别」「@container 具体怎么写」的开发者，通过实际拖动操作建立直觉认知，而不做能力检测。
页面同时提供 @container 语法基础说明表格，覆盖 container-type、container-name、@container 断点写法及典型使用场景（可复用组件根据自身所在容器宽度而非整页宽度调整布局）。