直接用 position: fixed + bottom: 0 不适合单手操作，因其将菜单置于屏幕正下方触控盲区，易误触系统手势，且未适配拇指自然落点；真正单手友好的方案是右下角偏移、扇形布局、语义与视觉顺序一致。
为什么直接用 position: fixed + bottom: 0 不适合单手操作？
它把菜单压在屏幕正下方，拇指够不到——尤其对大屏手机，底部 20px 区域实际是“触控盲区”。iOS 和 Android 的系统手势（上滑返回、呼出 Dock）也集中在底部边缘，固定条容易误触或被遮挡。
真正适合单手的底部菜单，得往右下角偏移，留出左下/右下两个可点击热区，同时保证主按钮在拇指自然落点（通常是屏幕右下 1/4 区域）。
- 别设
left: 0; right: 0;横跨全宽，那等于强制用户伸展手指 - 避免
height超过56px，否则会侵占太多垂直空间，挤压内容可读区域 - 别依赖
z-index: 999硬盖，某些安卓厂商 UI（如 MIUI）会把悬浮窗层级压得更低，需配合pointer-events: auto显式启用点击
弧形浮动布局的关键 CSS 技巧
弧形不是靠 JS 动画强行画圆，而是用 transform: rotate() + position: absolute 对每个菜单项做微调，让它们视觉上呈扇形分布，同时保持 DOM 顺序和语义结构不变。
- 根容器设
position: fixed; bottom: 24px; right: 24px;（避开系统手势区） - 每个菜单项用
position: absolute;，再通过transform: rotate(Xdeg) translate(80px)推出弧线轨迹 - 旋转角度按项数等分：3 项就用
-15deg, 0deg, +15deg；5 项可用-30deg, -15deg, 0deg, +15deg, +30deg - 所有项统一设
transform-origin: center bottom;，确保旋转锚点在底部中心，不漂移 - 必须加
will-change: transform;，否则 iOS Safari 滚动时弧形项会闪烁或跳动
移动端点击失效或错位的三个硬坑
弧形菜单在真机上常点不中，不是代码写错，而是 viewport 或事件坐标没对齐。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
touchstart事件里不要直接用event.clientX/clientY，要转成视口坐标：const x = event.touches[0].clientX; - 如果页面有缩放（如双指 pinch），
getBoundingClientRect()返回值会失真，得用window.visualViewport?.offsetLeft校正 - 别给弧形项父容器设
overflow: hidden，它会裁掉transform溢出部分，导致菜单项“半截消失” - iOS 上软键盘弹出会触发
resize，但visualViewport.height变化滞后，建议监听focusin事件临时隐藏菜单
要不要用 JS 计算弧形路径？
纯 CSS 弧形足够应付 3–5 个菜单项；超过 5 项或要求精确圆弧半径，才值得用 JS 动态生成 transform 值。
简单场景下，手写 CSS 更稳：浏览器解析快、无 JS 执行延迟、不依赖 DOMContentLoaded。复杂交互（比如点击展开二级弧形）才需要 JS 控制类名切换。
真正容易被忽略的是：弧形菜单的 aria-label 必须按视觉顺序写，不能按 DOM 顺序——否则屏幕阅读器会从最左项开始读，而用户看到的是扇形最外侧项，认知错位。
