按钮用百分比宽度在小屏上溢出，是因为width: 100%基于未约束的父容器计算，且未考虑box-sizing、padding、border等盒模型增量；需配合box-sizing: border-box、父容器max-width: 100%及合理min-width/max-width使用。
按钮用百分比宽度为什么在小屏上会溢出？
直接写 width: 100% 看似“自适应”，但实际常导致按钮撑破父容器或文字换行错乱——因为百分比是相对于父元素计算的，而父元素本身可能没设约束，或者没考虑内边距、边框带来的盒模型增量。
解决的关键不是只加百分比，而是配合 box-sizing: border-box + 明确的父容器限制：
- 给按钮父容器（比如
<div class="btn-wrap">）加上 <code>max-width: 100%和padding预留空间 - 按钮自身设
width: 100%+box-sizing: border-box，确保 padding/border 不额外加宽 - 避免在按钮上同时设
min-width和width: 100%，否则小屏下min-width会强制覆盖百分比 - 文字较长的按钮（如“立即免费试用”），小屏下至少保持
min-width: 120px，避免文字堆叠成两行又截断 - 带图标的按钮，图标+文字总宽不能低于图标尺寸（比如
min-width: 44px，满足移动端最小触控面积） - 和输入框并排时，按钮需和输入框同高同最小宽度，保持视觉对齐
-
width: 100%让它随容器伸缩 -
max-width: 280px（或max-width: 20rem）防止单个按钮在桌面端拉得太长、破坏布局节奏 - 搭配
margin: 0 auto可居中，避免左对齐后右侧大片留白 - 没设
cursor: pointer—— 某些浏览器不会触发:hover或:active，但更关键的是影响触摸反馈识别 -
touch-action: manipulation缺失 —— iOS Safari 默认延迟 300ms 判断是否双击，加这句可消除延迟并提升点击响应 - 父元素有
overflow: hidden且按钮部分被裁切 —— 尤其在transform或position: absolute场景下，裁切区域无法响应触摸 - 按钮字体太小（如
font-size: 12px）且没设min-height—— 实际点击热区远小于视觉大小
什么时候该用 min-width 而不是固定 px？
min-width 不是用来“让按钮变大”的，而是防止它在窄屏下缩得太小、文字被挤压或点击区域过小。典型适用场景：
注意：min-width 只在内容宽度小于该值时生效；如果按钮内容本身已超 min-width，它就不起作用。
立即学习“前端免费学习笔记（深入）”；
max-width 在按钮响应式中真正起什么作用？
max-width 是控制“上限”的，常见误用是给按钮直接设 max-width: 300px 却不配其他规则——这会导致中大屏下按钮永远不铺满，失去响应意义。
它该和 width: 100% 组合使用，形成“尽量占满、但别太宽”的逻辑：
若按钮在 Flex 容器中，max-width 还能防止它抢走其他兄弟元素的空间。
移动端真机调试时按钮点击失效？检查这几个 CSS 属性
很多“自适应按钮”在 iOS 或安卓真机上点不动，问题常不在响应式逻辑，而在被忽略的交互层设置：
响应式不只是尺寸变化，更是交互边界的一致性。一个按钮在 320px 屏上能点，在 1440px 屏上也得保持可点、可读、可识别——这些细节比 min-width 的数值更容易被跳过。
