最直接有效的方法是用:hover配合transform:scale()加transition，需设display、避免width/height动画、处理移动端:active及硬件加速。
用 CSS :hover 配合 transform: scale() 最直接有效
浏览器原生支持，无需 JS，性能好，兼容性也足够（IE 9+）。关键不是“能不能做”，而是怎么写才不踩坑。
-
transform: scale(1.1)比改width/height更平滑，不会触发重排（reflow） - 必须加
transition，否则放大是瞬时跳变——比如写成transition: transform 0.2s ease; - 按钮本身要有明确的
display类型（如inline-block或block），否则transform在某些内联元素上表现异常 - 如果按钮含文字，放大后可能换行或溢出，建议配合
white-space: nowrap;和overflow: hidden;控制
按钮文字模糊？检查是否启用了硬件加速和抗锯齿
放大后文字发虚，常见于 Chrome 和 Safari。这不是 bug，而是 transform 默认启用 GPU 加速后，亚像素渲染逻辑变化导致的。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 加
transform: translateZ(0);或will-change: transform;有时能改善，但别滥用——will-change会提前占用图层资源 - 更稳妥的做法是限制放大倍数，
scale(1.08)比scale(1.2)文字清晰得多 - 避免对
<button></button>直接设font-size动画，那会强制重绘文本，卡顿且模糊
移动端点击无响应？记得处理 :active 与 touch-action
在 iOS Safari 或部分安卓浏览器中，悬停效果在真机上根本不会触发，因为没有“悬停”概念；但用户点按后常发现按钮没反馈，甚至误触两次。
-
:hover在触摸设备上默认延迟约 300ms 触发（为兼容双击缩放），所以纯:hover不适合移动端交互反馈 - 加
:active样式（如transform: scale(0.95);）能提供即时点击反馈 - 若按钮只用于点击，建议加
style="touch-action: manipulation;"，禁用双击缩放，让:active更灵敏 - 不要依赖
:hover做关键功能提示（比如“悬停才显示删除图标”），移动端用户看不到
用 Tailwind 或 Vue/React 组件时，class 冲突怎么办？
框架组件（如 el-button、Button）通常自带 hover 样式，直接覆盖容易失效，得看它内部怎么封装。
- Tailwind 用户：用
hover:scale-110是最简方案，但注意它默认只对transform生效，若组件加了!important或 inline style，就得提高优先级（比如加group+group-hover:scale-110） - Vue 中用
<button class="..."></button>是绕过 CSS 的笨办法，没必要——优先查组件文档是否支持hover-classprop - React + styled-components？确保你的
&:hover写在最外层样式块里，别被子组件的className覆盖掉
.btn {
display: inline-block;
padding: 8px 16px;
transition: transform 0.2s ease;
}
.btn:hover {
transform: scale(1.08);
}
真正麻烦的从来不是“怎么放大”，而是放大之后，文字糊了、移动端没反应、或者被框架样式吞掉了——这些细节不试到真机和不同浏览器，光看文档根本发现不了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
