移动端无:hover伪类，需用@media (hover: hover) and (pointer: fine)隔离鼠标设备，或用:active/js模拟；scale缩放需加translatez(0)防模糊，并注意transform引发的层叠上下文问题。
移动端根本没:hover，别硬套桌面写法
直接写 .card:hover { transform: scale(1.05); } 在 iOS Safari 和大多数安卓浏览器里基本无效——触摸设备没有持续 hover 状态，点一下可能短暂触发，再点就没了，甚至卡住。这不是 bug，是交互模型差异。
用@media (hover: hover) and (pointer: fine) 隔离鼠标设备
这是最轻量、无 JS 的解法，只让 hover 样式生效于真正支持悬停的设备：
- 必须同时检查两个条件：
@media (hover: hover) and (pointer: fine)，缺一不可 - 写法示例：
@media (hover: hover) and (pointer: fine) { .card:hover { transform: scale(1.03); transition: transform .15s ease-in-out; } } - 不加这个媒体查询，等于把桌面逻辑强行塞给手机，真机测试必翻车
- 注意：部分旧版安卓 WebView 不识别该查询，但主流 Chrome/Firefox/Safari（iOS 13+）都已支持
触屏设备改用:active或JS切换class
:active 是移动端唯一可靠的伪类，但它是瞬时态（touchstart → touchend），不能维持悬停感。实际可用方案：
- 简单反馈：
.card:active { transform: scale(1.02); }，适合按钮类元素，别指望它“停留” - 真要模拟 hover 效果，得用 JS 监听
touchstart加 class、touchend移除，例如：element.classList.add('is-hovered') - 千万别用
click代替 —— 移动端 click 有 300ms 延迟，且会干扰原生滚动 - 如果卡片带链接，记得在
touchstart里event.preventDefault()防止误触发跳转
放大后文字模糊或边缘发虚？别怪scale
Chrome/Safari 对非整数缩放（如 scale(1.03)）启用 subpixel 渲染，导致字体边缘轻微发虚。这不是代码错，但用户能感知：
- 加
transform: scale(1.03) translateZ(0)强制 GPU 加速，缓解模糊 - 慎用
will-change: transform—— 只在高频交互组件上加，滥用反而拖慢渲染 - 避免
scale(1.15)这类值，优先选scale(1.05)或scale(1.1)，像素对齐更稳 - 图片本身加
image-rendering: -webkit-optimize-contrast（WebKit）或crisp-edges（Firefox），但对文字效果有限
transform 会创建新层叠上下文，可能让遮罩层被压在底下，或者 fixed 导航栏意外偏移。这种问题没法靠加一行 CSS 解决，得先 inspect 元素看 computed z-index 和 stacking context。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
