组件换个容器就溢出：用容器查询和安全区修响应式布局

组件换个容器就溢出用容器查询和安全区修响应式布局固定断点只知道视口不知道组件实际拿到多少空间。多栏、折叠屏与系统字号放大时容器查询和安全区往往比再补一个全局断点更可靠。先找越界而不是先补断点把关键操作区放进截图测试检查按钮是否在可视区域、文字是否被裁掉、可点击区域是否足够。测试列表只保存设备尺寸和缩放比例不要带入真实用户信息。const boxes await page.locator([data-critical]).evaluateAll((nodes) nodes.map((node) node.getBoundingClientRect().toJSON()) ); const outside boxes.some((box) box.bottom window.innerHeight || box.left 0);组件按容器决定排版对于可复用卡片容器查询比按整页视口分支更贴近实际空间。底部操作区也要使用安全区间距避免被设备边缘遮住。.product-card { container-type: inline-size; } .actions { padding-bottom: max(16px, env(safe-area-inset-bottom)); } container (max-width: 24rem) { .product-card__actions { grid-template-columns: 1fr; } }应急时怎么收口先用最小改动保证主操作可见再补齐复现用例。不要在事故里堆叠新的全局媒体查询把规则移回组件记录它依赖的是容器宽度、内容长度还是安全区。这样下次遇到陌生尺寸时页面仍有可解释的退路。