最稳写法是直接用 button:hover { transform: scale() }，需设初始 scale(1)、仅过渡 transform、放大控制在 1.05–1.12、确保 display 为 block/inline-block，并注意移动端 :hover 无效、文字模糊及响应式热区问题。
button:hover + transform:scale() 是最稳写法
直接用 transform: scale() 配合 :hover 就能实现平滑放大，不用 JS，浏览器原生支持，IE9+ 都能跑。关键不是“能不能做”，而是怎么写才不卡、不闪、不糊。
实操建议：
• 必须给按钮设初始 transform: scale(1)，否则 Safari 和旧版 Chrome 首次悬停会轻微闪烁
• 过渡只写 transition: transform 0.25s ease，别用 all，避免意外触发其他属性动画
• 放大倍数控制在 scale(1.05) 到 scale(1.12) 之间，再高文字容易发虚
• 按钮得是 display: inline-block 或 block，纯 inline 元素（比如没设 display 的 <span></span>）上 transform 行为不可靠
• 如果按钮有 box-shadow 或粗边框，放大后可能被父容器裁掉，检查父级是否设了 overflow: hidden
移动端点击没反馈？别硬套 :hover
真机上 :hover 基本不触发——iOS Safari 和多数安卓浏览器压根没“悬停”这个概念，这不是 bug，是规范行为。指望它做点击反馈，用户会感觉按钮没响应。
实操建议：
• 点击瞬间用 :active { transform: scale(0.95) } 提供即时反馈
• 给按钮加 style="touch-action: manipulation;"，禁用双击缩放，让 :active 更灵敏
• 别把关键操作（比如删除图标、二级菜单）藏在 :hover 下，移动端用户根本看不到
• 如需更复杂状态（比如长按、拖拽），必须用 JS 监听 touchstart/touchend，CSS 无解
放大后文字模糊？和硬件加速有关
Chrome 和 Safari 里文字一放大就发虚，不是你代码写错，是 transform 默认启用 GPU 加速后，亚像素渲染逻辑变了。强行加 will-change: transform 可能反而更糊，还占图层资源。
实操建议：
• 优先降低放大倍数，scale(1.08) 比 scale(1.2) 清晰得多
• 避免对按钮直接做 font-size 动画，那会强制重绘文本，卡顿且模糊
• 可试 transform: translateZ(0) 微调渲染，但别全局加，只针对已确认模糊的按钮
• 如果按钮含图标字体（如 Font Awesome），确保用了 font-display: optional，防止加载期间错位放大
响应式下按钮太小？scale() 不解决热区问题
transform: scale() 只改视觉大小，不扩大点击热区、不改变布局占位、屏幕阅读器也感知不到变化。老人或手指粗的用户点不中，不是动效不够，是物理尺寸不够。
实操建议：
• 把按钮最小高度设为 min-height: 48px 或 min-height: 3rem，并配 box-sizing: border-box
• 用 clamp(14px, 2.5vw, 18px) 控制字体，而不是固定 font-size: 16px
• padding、border-radius、line-height 全部同步用相对单位，否则比例错乱
• 别在 viewport meta 里写 initial-scale=1.5，它会拉伸整个页面，导致换行错乱、图标糊掉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
