睡眠分析页核心是准确呈现时间序列数据，需先明确数据来源（localstorage、api或静态数组），再用css conic-gradient实现精准环形图，flex布局构建响应式时间轴，注意时区统一与移动端touch-action优化。
用 HTML + CSS 做睡眠分析页，核心不是写页面，是组织好时间序列数据
纯 HTML 无法计算深睡/浅睡时长、识别觉醒次数，它只负责把后端或 JS 处理好的结果“画出来”。新手常误以为加几个 <div> 和颜色就能模拟专业设备分析，结果数据没来源、图表不联动、移动端一塌糊涂——先确认你的数据从哪来：<code>localStorage 里存的 mock 数据？fetch() 拿的 JSON 接口？还是直接写死在 HTML 里的 sleepData 数组？没有真实时间戳和阶段标记（如 "stage": "deep"），再漂亮的圆环图也只是装饰。
睡眠阶段环形图别硬套 SVG，优先用 CSS conic-gradient 实现
用 <svg></svg> 手动算角度、画 path 容易卡在百分比换算上，尤其当深睡 2.3 小时、REM 1.7 小时、浅睡 4.1 小时要等比分配 360° 时，小数点后两位误差就会导致缺口或重叠。更稳的做法是：
- 把总时长转成秒，各阶段也转成秒，算出占比：
deepPercent = Math.round((deepSec / totalSec) * 100) - 用
conic-gradient拼接三段：第一段deepPercent%是蓝色，第二段remPercent%是紫色，剩下给浅睡 - 务必加
background: #f5f5f5作底色，否则透明背景下渐变边缘发虚 - 别忘了加
aspect-ratio: 1和width: 100%; max-width: 200px控制响应式缩放
时间轴（Timeline）显示入睡/醒来时刻，用 flex + position 而非绝对定位
常见错误是给每个 <div class="event"> 写 <code>left: 25%、left: 78%，结果屏幕一变、字体一缩，时间点全偏移。正确做法是：
- 用
display: flex包裹整条轴，设justify-content: space-between - 每个事件点用
flex: 0 0 auto固定宽度，内部用position: relative - 时间文字用
top: -24px往上提，避免遮挡横线；横线本身用伪元素::before画，长度由父容器 width 决定 - 如果要标“凌晨 2:17 醒来”，注意时区：前端
new Date().toLocaleTimeString()默认本地时区，但设备原始数据可能是 UTC，差 8 小时就全乱了
移动端睡眠报告页，禁用 user-select 但保留 touch-action
为防用户误触选中文字影响阅读体验，很多人加 user-select: none，结果发现 iOS 上双指缩放图表失效、滑动时间轴卡顿。真正该做的是：
- 对非交互区域（如标题、统计数字）加
user-select: none - 对图表容器加
touch-action: pan-x pinch-zoom，明确告诉浏览器“这里允许横向拖动和双指缩放” - 禁用
zoommeta 标签（<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">），否则 iPhone 上手指双击会触发强制缩放，把环形图撑出屏幕 - 测试真机：Chrome DevTools 的 device mode 只能模拟 viewport，测不到
touch-action是否生效，必须连真机调试
数据格式不对、时间戳没归一化、CSS 单位混用 rem/vw/vh，这三个地方出问题，页面看起来“差不多”，但换个设备或加个新数据点就崩。别急着美化，先让 console.log(sleepData) 里的时间字段能被 new Date() 正确解析。
