最稳妥的按钮宽度控制方案是同时设置min-width和max-width并配合padding、font-size及box-sizing:border-box。单独width会导致溢出或局促，仅max-width会使短文案按钮过窄；min-width需≥44px（推荐100px），max-width建议300px～400px，配合white-space:nowrap防折行，避免vw/rem导致触控失效或布局失衡。
直接设 max-width 和 min-width 是最稳妥的控制手段，但必须配合 padding 和 font-size 使用，否则会破坏点击区域或导致文字换行错乱。
为什么不能只靠 width 或 max-width？
单独设置 width: 200px 会让按钮在窄容器里溢出，或在宽屏下显得局促；而只设 max-width: 300px 又可能让短文案按钮缩得太小（比如“确定”两个字撑不开宽度）。真实场景中，按钮要兼顾可读性、触控安全和布局弹性。
-
min-width必须 ≥44px（移动端最低点击区），推荐min-width: 100px起步，防止“提交”“删除”等短文本塌陷 -
max-width建议设为300px～400px，避免长文案（如“确认删除全部已选文件？”）把按钮拉得过宽、割裂视觉节奏 - 若按钮内含图标+文字，需额外加
white-space: nowrap防止文字在窄屏下折行
min-width 和 max-width 的典型组合写法
以下写法已在主流浏览器（Chrome 120+、Safari 17+、Edge 122+）验证有效，且适配高 DPI 屏和页面缩放：
.btn-primary {
font-size: 16px;
padding: 10px 20px;
min-width: 100px;
max-width: 300px;
box-sizing: border-box;
}
-
box-sizing: border-box必须显式声明，否则padding会叠加在min-width之外，实际宽度超预期 - 不要用
width: 100%+max-width，它在 flex 容器中容易被压缩到内容宽度，失去控制力 - 如果按钮是
display: inline-block，注意父级font-size: 0可能导致子元素间隙异常，间接影响宽度计算
响应式场景下 min-width/max-width 的陷阱
用 vw 或 rem 做 min-width 很诱人，但实际易出问题：
立即学习“前端免费学习笔记（深入）”；
-
min-width: 20vw在小屏（如 iPhone SE）下可能只有 ~75px，低于 44px 触控底线 -
max-width: 50rem若根字体被用户放大（如系统辅助功能开启），按钮可能撑满整行，挤占其他控件 - 媒体查询中改
min-width时，别忘了同步调padding和font-size，否则热区比例失衡（比如小屏下 padding 没缩，按钮虚胖）
真正难的是平衡：既要让“取消”和“立即开通 VIP 年度套餐”共用同一套尺寸规则，又不能牺牲任一端的可用性。多数项目最终都得靠 min-width 锚定底线，靠 padding 承担伸缩主力，max-width 只做兜底约束——而不是把它当主要调节杠杆。
