不能直接给 button 加 width: 100%，因为原生 button 有 UA 默认 min-width（如 Chrome 的 -webkit-min-content），width: 100% 易触发块级行为、破坏内联流、导致文字截断或点击区域不足 44px；正确解法是用 display: inline-flex + min-width: 0 + flex-direction: row + align-items: center + padding 扩展触控区。
“铺满屏幕”不是指按钮撑满整个 viewport，而是让购物车按钮在横条容器中自适应宽度、不溢出、不换行、触控友好——直接设 width: 100% 会破坏语义和交互，多数情况反而出错。
为什么不能直接给 button 加 width: 100%
原生 <button></button> 在多数浏览器 UA 样式中自带 min-width: auto 或隐式最小宽度（如 Chrome 设为 min-width: -webkit-min-content），width: 100% 往往被忽略或触发意外块级行为；更关键的是，它会让按钮脱离内联流，无法与文字/图标并排，且移动端点击区域仍可能不足 44px。常见错误是写完 width: 100% 发现按钮卡在父容器左上角、文字被截断、或点击无响应。
display: inline-flex 是横条按钮的真正解法
它让按钮表现得像一个“可伸缩的内联盒子”，既随文字内容自然变宽，又保持内联特性，能嵌入段落、标题甚至图标旁。必须配合以下三项才能稳定生效：
- 显式重置
min-width: 0（比width: auto更可靠，覆盖 UA 默认） - 设
flex-direction: row和align-items: center，避免子元素（如图标+文字）垂直错位 - 用
padding扩展触控区，而非调高height——例如padding: 12px 16px可轻松达到 44px 垂直可点高度
示例最小可用结构：
立即学习“前端免费学习笔记（深入）”；
.cart-btn {
display: inline-flex;
min-width: 0;
flex-direction: row;
align-items: center;
padding: 12px 16px;
border: none;
background: #ff6b35;
color: white;
font: inherit;
}
横条容器本身怎么自适应铺满？
所谓“横条”，通常指固定在页面底部或悬浮右下角的全宽操作栏。它的自适应逻辑和按钮不同，重点在容器定位与内部对齐：
- 若需固定在底部：用
position: fixed; bottom: 0; left: 0; width: 100%;，再套一层display: flex; justify-content: center;居中按钮 - 若需悬浮右下角：用
position: fixed; right: 16px; bottom: 16px; width: calc(100% - 32px);，避免遮挡系统返回键 - 必须设
box-sizing: border-box，否则padding+border会撑出容器 - 禁止给横条容器设
overflow: hidden，否则按钮边缘（尤其圆角或阴影）可能被裁掉
移动端触控失效和字体缩放失衡怎么防？
很多按钮在 iPhone 上点不中，不是 JS 绑定问题，而是物理尺寸不足。H5 页面必须按设备像素密度缩放，而不是统一用 px：
- 根元素动态设
font-size：例如 JS 中根据window.devicePixelRatio或屏幕宽度计算，再赋值给document.documentElement.style.fontSize - 按钮所有尺寸（
padding、font-size、border-radius）全部用rem，确保在小屏上不缩小到难以点击 - 避免
transform: scale()模拟放大——它不扩大实际点击热区，只放大视觉 - 测试时务必关掉 iOS 的「自动调整字体大小」设置，否则
rem会被二次干扰
最易被忽略的一点：横条按钮的 z-index 必须高于页面其他浮动层（如弹窗遮罩、广告 banner），否则在部分安卓 WebView 中会被遮挡，且该问题常在真机测试阶段才暴露。
