用 mousemove 和 touchmove 实时更新 CSS 变量实现动态背景色：归一化坐标映射 HSL 值，通过 setProperty 注入带单位的变量（如 ${sat}%），CSS 中用 hsl(var(--bg-h), var(--bg-s), var(--bg-l)) 绑定，注意大小写、作用域及 Safari 兼容性。
用 mousemove 实时读取鼠标坐标并更新 CSS 变量
核心是监听 mousemove 事件，把 event.clientX 和 event.clientY 映射到色值范围（比如 HSL 的 H 和 S），再通过 document.documentElement.style.setProperty() 注入 CSS 变量。注意不要在每次移动中直接改 background-color，否则失去 CSS 变量的复用性和可维护性。
关键点：
- 坐标需归一化：用
clientX / window.innerWidth得到 0–1 区间值，再乘以目标色域范围（如 H: 0–360，S: 0–100） - 推荐用 HSL 而非 RGB：H（色相）适合用 X 坐标驱动，S（饱和度）或 L（亮度）用 Y 坐标驱动，视觉变化更自然
- 加节流（
requestAnimationFrame或简单时间戳判断）避免高频触发卡顿
CSS 中定义变量并绑定到 background-color
变量必须声明在 :root 或目标元素上，且要确保作用域覆盖到你要着色的容器。常见错误是变量写在局部选择器里，但 background-color 应用在父级或 body 上，导致无效。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
:root {
--bg-h: 200;
--bg-s: 70%;
--bg-l: 60%;
}
<p>body {
background-color: hsl(var(--bg-h), var(--bg-s), var(--bg-l));
}注意：hsl() 函数内不能混用单位（如 var(--bg-s) 后面不能再加 %），变量值本身要带单位（70% 而非 70）。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
JS 修改变量时数值类型和单位必须匹配 CSS 需求
如果 CSS 中 --bg-s 期望的是 70%，而 JS 传了 70 或 "70"，浏览器不会自动补单位，背景会回退到初始色或失效。
安全做法：
- H 值（0–360）传数字即可：
setProperty('--bg-h', hue) - S/L 值带单位：
setProperty('--bg-s', saturation + '%')、setProperty('--bg-l', lightness + '%') - 避免字符串拼接出空格或非法字符，可用模板字符串：
`${saturation}%`
移动端 touchmove 兼容处理不能只靠 mousemove
手机浏览器默认不触发 mousemove，必须监听 touchmove 并从 event.touches[0] 取坐标。同时要注意 preventDefault() 可能影响页面滚动，慎用。
建议写法：
const updateBg = (x, y) => {
const hue = Math.floor((x / window.innerWidth) * 360);
const sat = Math.floor((y / window.innerHeight) * 100);
document.documentElement.style.setProperty('--bg-h', hue);
document.documentElement.style.setProperty('--bg-s', `${sat}%`);
};
<p>window.addEventListener('mousemove', e => updateBg(e.clientX, e.clientY));
window.addEventListener('touchmove', e => {
if (e.touches.length > 0) {
updateBg(e.touches[0].clientX, e.touches[0].clientY);
}
});真机调试时容易忽略 touch 事件对象结构差异，touches 是类数组，不是 changedTouches —— 除非你明确要响应手指抬起/离开，否则优先用 touches[0]。
最常被跳过的细节：CSS 变量名大小写敏感，JS 中 setProperty('--Bg-H', ...) 和 --bg-h 不匹配；另外，部分旧版 Safari 对 hsl() 中变量的支持不稳定，如需兼容 iOS 13 以下，得降级为 RGB 计算。
