按钮点击无反应的根本原因是 hit area 小于推荐的 44×44px 触控尺寸，需用 padding + min-w/min-h 保证最小点击区域，伪元素或 scale 方案仅适用于特定场景且有可访问性风险。
直接加大 px/py 是最简单有效的解法，但必须配合最小尺寸约束和视觉补偿，否则在移动端仍可能点不中；伪元素扩展或 scale 方案只适用于特定场景，滥用反而破坏可访问性。
为什么按钮点了没反应？不是 JS 问题，是 hit area 不够
浏览器判定“点击是否命中”的区域（hit area）默认等于元素的 layout 尺寸。Tailwind 的 px-4 py-2 在小屏下实际宽高可能只有 32×24px，远低于苹果/安卓推荐的 44×44px 最小触控尺寸。这不是事件没绑定，而是手指根本没落在有效区域内。
- 常见现象：按钮文字清晰可见，但连续点击 2–3 次才触发，尤其在 iOS Safari 或折叠屏设备上
- 检查方式：Chrome DevTools → Elements 面板 → 选中按钮 → 右侧 Styles 面板查看 computed
width/height，低于 44px 就危险 - 别信“看起来够大”——视觉大小 ≠ 点击区域大小，
font-size大不代表 hit area 大
优先用 padding + min-w/min-h 控制真实点击区
这是最可控、无障碍友好、且无需额外 DOM 或复杂 CSS 的方案。Tailwind 的间距工具类就是为此设计的。
- 移动端按钮至少设
min-w-[44px] min-h-[44px]，强制 hit area 下限 - 用
px-5 py-2.5（而非px-4 py-2）提升内边距，同时保持文字居中不拉伸 - 若视觉上觉得“太胖”，改
text-sm缩小文字，别动line-height或font-size单独调高度——这会导致 flex 布局中文字垂直偏移 - 禁用
h-10这类固定高度类，它会覆盖min-h-[44px]的响应式兜底能力
before 伪元素扩展只在必要时用
当按钮内容本身极小（如纯图标按钮），且无法改动 DOM 结构时，::before 是唯一不新增节点的扩展方式。
立即学习“前端免费学习笔记（深入）”；
- 必须给目标元素加
relative，否则::before定位失效 - 伪元素需显式声明
content: ""和pointer-events: auto，缺一不可 - 用
inset向外扩，例如inset:-8px表示上下左右各扩 8px，总 hit area 增加 16px - 别对父容器设
pointer-events: none，否则伪元素点击也会失效 - 注意：该方案不改变焦点轮廓（
focus:ring）范围，键盘用户仍只能聚焦原始尺寸
scale 扩展仅限 SVG 或 icon 字体按钮
transform: scale() 放大 hit area 时不占文档流，适合纯图标配按钮，但有明显限制。
- 必须搭配
origin-center，否则缩放中心偏移导致点击偏移 - 加
z-10确保放大层不被其他元素遮挡 - 慎用于含文字的按钮：
scale(1.3)会让文字模糊，除非加will-change: transform且浏览器支持良好 - iOS Safari 对
transform+fixed组合渲染不稳定，抽屉菜单里的图标按钮慎用
真正难的不是怎么扩，而是扩完之后是否还满足 WCAG 2.1 的焦点可见性、键盘导航顺序、屏幕阅读器标签（aria-label）同步——这些常被忽略，却直接影响残障用户能否正常使用。
