按钮:hover直接改font-size会引发布局重排导致抖动；推荐用transform:scale()配合transform-origin和固定宽高来稳定放大，移动端应降级为:active并慎用:hover。
button:hover 里直接改 font-size 会抖动
直接写 font-size: 18px 在 :hover 里，看似简单，但容易导致布局重排（reflow）：文字变大后，按钮高度可能撑开、内边距错位、甚至触发父容器换行。尤其当按钮用 inline 或没设固定宽高时，抖动更明显。
实操建议：
- 确保按钮有明确的
display类型，如inline-block或block - 给按钮设固定
height和line-height，让文字垂直居中且不随字号变化跳动 - 配合
overflow: hidden防止放大后文字溢出边缘 - 过渡必须只监听
font-size，别写transition: all——否则背景色、阴影等意外变化也会触发动画
用 transform: scale() 放大文字更稳但要注意 origin
transform: scale(1.15) 不改变文档流，性能好，也不会引起重排。但它缩放的是整个按钮盒（含文字、边框、阴影），不是纯文字本身。默认缩放中心是元素中点，如果按钮靠左排列，放大后可能向右偏移。
实操建议：
- 显式声明
transform-origin: center（或top left等）避免不同浏览器默认行为差异 - 务必为按钮加初始
transform: scale(1)，否则 Safari/旧 Chrome 首次 hover 可能闪一下 - 若只要文字放大、按钮框不动，得把文字包在
<span></span>里单独缩放，同时设display: inline-block防止换行 - 移动端慎用：iOS Safari 的
:hover有 300ms 延迟，且真机无悬停概念，:active才是可靠点击反馈
想文字放大但按钮尺寸不变？得拆结构
纯 CSS 没法只放大文字又锁死按钮宽高——font-size 变，行高和内边距自然变；transform: scale() 又会连带边框、阴影一起放大。真要“文字动、框不动”，得用 HTML 结构分离。
实操建议：
- 把文字用
<span class="btn-text"></span>包起来，按钮自身设固定width/height和overflow: hidden -
.btn-text:hover { transform: scale(1.2); }，再配transform-origin: center居中缩放 - 禁用文字换行：
white-space: nowrap;+text-overflow: clip; - 注意：这种写法在高缩放比（如
scale(1.3)）下，文字边缘可能模糊，建议控制在1.1–1.15内
移动端怎么让“悬停放大”有反馈
在触摸设备上，:hover 不是失效，而是行为不可靠：它可能不触发、延迟触发、或只在第一次点击后才生效。指望它做点击反馈，等于放弃移动端用户。
实操建议：
- 用
@media (hover: hover) and (pointer: fine)条件启用:hover，其他情况降级到:active -
:active必须加，哪怕只是transform: scale(0.98)，提供即时压感 - 对纯触屏场景，可加
touch-action: manipulation移除双击缩放延迟，让:active更灵敏 - 别把关键提示（比如“悬停显示操作图标”）绑在
:hover上——移动端用户根本看不到
transform-origin 的取值、transition 的粒度、以及 :hover 和 :active 的分层策略，稍不注意就会在某个机型或某个缩放比例下露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
