按钮尺寸应以 padding + min-width + font-size 协同控制，禁用纯 height/width 硬设；移动端点击区须 ≥44px×44px，主操作按钮推荐 16px 字号+10px 20px 内边距+44px 最小高，class 命名需语义化（如 btn-primary）而非视觉化。
按钮尺寸不能只靠 width 和 height 硬设，尤其在响应式或触控场景下，固定像素值容易导致点击区域不足、文字溢出或视觉割裂。真正可用的尺寸系统，是用 padding + min-width + font-size 协同控制，并配合语义化类名分层管理。
button 的 display 类型决定 padding 是否生效
很多按钮看着“设了 12px 上下 padding 却没变高”，问题常出在 display 值上。默认 button 是 inline-block，但若被全局样式重置为 inline（比如某些 CSS Reset），padding-top/padding-bottom 在旧版 Safari 或 WebView 中可能被忽略。
- 显式声明
display: inline-block或display: block（后者适合全宽按钮） - 避免用
float布局按钮，否则易引发父容器塌陷，间接压缩可用空间 - 检查开发者工具「Computed」面板中
display实际值，别只看 Styles 面板写的规则
移动端点击区域必须 ≥44px × 44px
W3C WCAG 和 Apple Human Interface Guidelines 都明确要求触控目标最小为 44×44px。仅靠文字撑开或只设 font-size 不够——文字大了，但热区还是窄的。
- 优先用
padding: 12px 20px扩展可点区域，比直接写height: 44px更健壮（适配不同字数） - 必须加
min-width: 44px和min-height: 44px，防止短文字按钮过窄 - 搭配
-webkit-tap-highlight-color: rgba(0,0,0,0.2)和touch-action: manipulation，否则 iOS 用户可能感知不到点击反馈 - 禁用
touch-action: none——这会彻底关掉原生点击行为
大中小尺寸该用什么单位定义
固定像素（如 height: 48px）在高 DPI 屏或缩放页面下会失真；em/rem 又受字体继承影响不可控。最稳妥的是基于 font-size 的相对计算 + padding 主导。
立即学习“前端免费学习笔记（深入）”；
-
小按钮：建议
font-size: 14px+padding: 6px 12px+min-height: 32px -
中按钮（主操作）：推荐
font-size: 16px+padding: 10px 20px+min-height: 44px -
大按钮：用
font-size: 18px+padding: 12px 24px+min-height: 48px，不建议单纯拉高height - 所有尺寸都应设
border-radius: 6px（主按钮）或border-radius: 50%（图标按钮），圆角值不宜随尺寸线性放大
class 命名要反映语义而非视觉
别用 btn-large 或 btn-red 这类纯表现类名。尺寸系统要服务于交互意图，不是美术稿像素搬运。
- 用
btn-primary/btn-secondary/btn-tertiary区分操作重要性，再由它们内部统一控制尺寸层级 - 图标按钮单独用
btn-icon，强制width: 36px+height: 36px+border-radius: 50%，并加aria-label - 文本链接类按钮用
btn-link，保持display: inline+ 无 padding + 下划线，不参与尺寸系统 - 禁用状态统一加
pointer-events: none+cursor: not-allowed+aria-disabled="true"，不能只靠灰度
真正难的不是写出三种尺寸的 CSS，而是让 btn-primary 在手机横屏、平板分屏、桌面缩放 125% 时，依然保证可点、可读、不溢出——这意味着每条 padding 值都要经过真机触摸验证，而不是只在 Chrome DevTools 里量像素。
