2026-08-12 07:03:19 UTC+8UPDATE #042
新增 Responsive Preview Lab
新增一个明显可见的响应式组件测试实验室。访客无需反复调整整个浏览器窗口,即可在不同容器宽度下观察同一组件如何重新排版。
- 提供 360px、640px、960px 和 AUTO 四种预设宽度,并在桌面浏览器中支持直接拖动测试容器右侧边缘。
- 实时显示当前容器宽度,并把布局状态分成 narrow、medium 和 wide 三档。
- 示例组件使用 CSS Container Queries,根据自身容器宽度而不是 viewport 宽度切换布局。
- 使用
ResizeObserver更新宽度读数,并为不支持它的环境保留窗口 resize 回退。 - 没有增加第三方脚本、付费依赖或外部运行时资源;原有诊断、地图、主题、密度、快捷键、性能和无障碍功能均保留。