最可靠方案是用 JavaScript 监听 touchstart/mousedown 添加 class、在 document 上监听一次性的 touchend/mouseup 移除 class，并配 font-size transition 和 user-select: none 防长按菜单。
用 :active 伪类最直接，但有局限性
多数人第一反应是给文字加 :active，比如：.text:active { font-size: 1.4em; }。这在桌面端鼠标点击时能短暂触发，但在移动端——尤其是「长按」场景下，:active 通常只在触摸开始瞬间生效，松开前就已退出，根本达不到“按住变大、松开复原”的持续反馈效果。
真正可靠的做法是配合 JavaScript 监听 touchstart / mousedown 和 touchend / mouseup 事件，动态添加/移除 class。
必须监听 touchend 和 mouseup，不能只靠 blur 或 mouseleave
移动端长按后手指可能滑动离开元素再松开，此时 mouseleave 已触发，但 touchend 仍会落在 document 上；同理，桌面端鼠标可能拖出按钮再松开。如果只监听元素自身的 mouseup，松开时样式不会恢复。
正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 按下时（
touchstart或mousedown）立即加 class，如text--pressed - 同时在
document上绑定一次性的touchend和mouseup监听器 - 这两个事件任一触发，就移除 class，并清理监听器
font-size 动画要加 transition，但别用 all
仅写 transition: all 0.15s ease 看似省事，但会导致所有可动画属性（比如 color、border 等）意外参与过渡，干扰预期效果。更安全的是明确指定：
.text { transition: font-size 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
这个缓动函数比默认 ease 更轻快，符合“按压反馈”的物理直觉。注意：过渡时间不宜超过 0.2s，否则松开后缩回太慢，用户会觉得卡顿。
移动端需防默认长按菜单干扰
iOS Safari 和部分安卓浏览器在长按时会弹出复制/搜索菜单，遮挡视觉反馈，甚至中断 touch 事件流。必须加这两行 CSS 阻断：
.text { -webkit-user-select: none; user-select: none; }
否则用户长按 1 秒还没看到文字变大，先弹出「复制」气泡，体验完全断裂。这个设置不影响正常点击交互，只禁用长按选择行为。
最容易被忽略的点是：不要用 transform: scale() 替代 font-size ——它会让文字模糊（尤其非整数倍缩放），且屏幕阅读器仍读原始字号，对可访问性不友好。真要放大，就动 font-size，老老实实设单位、配 transition、管好事件边界。
