响应式结算页面核心是视口单位、flex布局与热区控制：ios safari需避免vh设高、用min-height防缩放撑开，全选区用label+gap布局，金额用clamp缩放，“去结算”强制不换行，阴影外置单层并适配深色模式。
直接用 CSS 实现响应式结算页面，核心不是写一堆媒体查询，而是靠视口单位、flex 布局和现代工具类控制流式行为；Bootstrap 的 .footer-settlement 类只是参考，真要稳定适配各种设备，得从容器定位、内容收缩逻辑和点击热区三处下手。
固定底部结算栏怎么不被 iOS Safari 截断？
iOS Safari 对 position: fixed + bottom: 0 的处理有延迟，尤其在地址栏收起/展开时，结算栏会短暂上移或消失。这不是 bug，是视口高度动态变化导致的渲染错位。
- 必须用
height: 50px（不能只靠line-height），并加min-height: 50px防止字体缩放后撑开 - 避免用
vh单位设高度——Safari 的100vh在地址栏隐藏时会变大，导致结算栏浮空 - 给父容器（比如
）加overscroll-behavior: contain，阻止滚动穿透到结算栏背后 - 移动端按钮热区至少 44×44px，
padding要显式设够，别依赖默认值
全选框和合计金额怎么在小屏下不挤成一团？
小屏宽度不足时，display: flex 默认会压缩子元素，但 flex-shrink: 1 对 input 和 span 效果不一致，常导致复选框文字重叠或价格数字换行错位。
- 把全选区域包进
<label class="d-flex align-items-center"></label>，用gap: 0.25rem控制间距，比margin更可靠 - 合计金额用
<span class="text-nowrap"></span>包裹，配合font-size: clamp(0.875rem, 4vw, 1rem)动态缩放 - “去结算”按钮强制不换行：
white-space: nowrap，同时设overflow: hidden+text-overflow: ellipsis防溢出 - 别用
width: 20%这种固定比例——小屏下 20% 可能只有 30px，文字根本塞不下
结算栏阴影和边框在不同设备上怎么统一显示？
Android 和 iOS 对 box-shadow 渲染精度不同，且部分低端 Android 浏览器不支持多层阴影；直接套 Bootstrap 的 shadow-sm 在固定定位下容易被裁剪。
- 阴影必须加在外层容器（如
<div class="settlement-bar">），而不是结算栏内部元素 <li>用单层阴影更稳妥：<code>box-shadow: 0 2px 8px -2px rgba(0,0,0,0.1)，避免inset或多层叠加 - 顶部边框改用伪元素模拟：
<div> 后加 <code>::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #e0e0e0; }，比border-top更易控制渲染 - 深色模式下，阴影颜色需同步切换：用
@media (prefers-color-scheme: dark)重设rgba(255,255,255,0.08)
真正难的不是让结算栏“看起来像”，而是它在用户滑动、切换横竖屏、触发软键盘时仍保持位置和交互可用——这些细节没法靠一个 class 解决，得在 resize 和 scroll 事件里微调，但多数项目连 visualViewport API 都没用上。
