用vw配合aspect-ratio实现转盘等比缩放的核心是设width: xvw与aspect-ratio: 1/1保证正方形，九宫格用grid-template-columns/rows: repeat(3, 1fr)，旋转仅作用于奖品包裹层且动画后重置transform为none。
用 vw 单位配合 aspect-ratio 控制转盘容器宽高比
纯 CSS 实现等比缩放的核心是让转盘容器不依赖固定像素，而是随视口变化自动调整。最直接的方式是用 vw 设定宽度，再靠 aspect-ratio: 1 / 1 保证正方形——这样无论屏幕多宽，转盘始终是“视口宽度的某个百分比 × 等高”的正方形。
常见错误是只设 width: 80vw 却忘了设 height 或 aspect-ratio，结果在竖屏手机上高度被内容撑开，九宫格变形。
-
aspect-ratio在 Safari 15.4+、Chrome 88+、Firefox 89+ 支持良好；iOS 15.4+ 的微信内置浏览器也支持 - 若需兼容老版本 iOS（如 iOS 14），可用
padding-bottom: 100%+position: relative容器模拟正方形，子元素用position: absolute布局 - 避免对转盘本身设
max-width或min-height，它们会破坏等比逻辑
九宫格子项用 grid + fr 单位均分，别用 % 或 px
九宫格本质是 3×3 网格，用 display: grid 最稳妥。关键在于：行高列宽必须和容器同比例缩放，不能写死 33.333%——因为百分比在某些安卓 WebView 中会因四舍五入累积误差，导致最后一列换行或错位。
正确做法是用 grid-template-columns: repeat(3, 1fr) 和 grid-template-rows: repeat(3, 1fr)，让每个格子自动均分父容器空间。
立即学习“前端免费学习笔记（深入）”；
- 每个格子内部内容（图标/文字）建议用
em或rem设字体大小，比如font-size: 1.2rem，避免用px锁死尺寸 - 如果格子需加边框，统一用
box-sizing: border-box，否则边框会额外增加尺寸，破坏等比 - 慎用
grid-gap：它不参与fr分配，会压缩格子实际可用空间；推荐改用padding模拟间隙
旋转动画用 transform: rotate()，别动 width/height
抽奖转盘的“转动”效果必须用 transform，这是唯一能触发硬件加速、且不影响布局流的属性。一旦在动画中修改 width、height 或 left/top，轻则卡顿，重则在低端安卓机上直接跳帧或失真。
尤其注意：九宫格容器本身不能设 transform: rotate()（否则整个格子跟着转，按钮位置全乱），而是应该把旋转施加在一个包裹所有奖品项的 <div class="prize-wrapper"> 上，格子自身保持静态定位。
- 动画时间建议 ≥ 3s，太短用户看不清结果；用
cubic-bezier(.25,.46,.45,.94)模拟惯性减速，比ease-out更自然 - 用
will-change: transform提前告知浏览器该元素将变换，减少首帧卡顿（但别滥用，只加在真正要动的元素上） - 别在旋转中动态修改
transform-origin，iOS Safari 会丢帧
适配刘海屏和小屏设备时，用 min-width + scale 保底
超小屏（比如 iPhone SE 第二代，320px 宽）下，80vw 只有 256px，转盘可能小到按钮无法点击。这时不能单纯调大 vw 值（否则大屏上又溢出），而应设置最小物理尺寸兜底。
方案是：先用 min-width: 280px 限制容器最小宽度，再对小屏单独用 @media (max-width: 360px) 配合 transform: scale(1.1) 微调——注意是 scale 整个容器，不是改 font-size 或 padding。
-
scale()不影响布局流，不会挤压其他元素，是安全的视觉放大手段 - 避免在媒体查询里重复定义
aspect-ratio，它已由父容器继承，重复写可能被忽略 - 真机测试重点看微信内置浏览器：部分旧版 X5 内核对
scale+transform-origin组合有渲染 bug，可加backface-visibility: hidden修复
最易被忽略的是：旋转结束后，必须用 transform: none 清除内联样式，否则下次点击可能从上次结束角度继续转——这个细节在调试时往往被当成“动画没重置”，其实是 DOM 上残留了 style="transform: rotate(1234deg)"。
