CSS变量不能自动响应resize，必须用JS在mouseup时读offsetWidth并写入--panel-width；mousemove中节流更新--drag-x/y；textarea不适用布局缩放，应使用div+resize；需JS校验min/max-width并限制作用域。

不能只靠 CSS 变量完成拖拽缩放交互 —— 它们只是状态容器，必须由 JS 主动读写才能响应变化。

resize 属性改了尺寸，但 --panel-width 没更新？

浏览器的 resize 是纯渲染层行为：它直接写 style="width: 420px"，不触发任何事件，也不同步到自定义属性。你调用 getComputedStyle(el).getPropertyValue('--panel-width') 拿到的永远是上一次 JS 写入的值，不是当前真实尺寸。

• 常见错误现象：左侧面板拖宽了，右侧区域宽度没变（因为 calc(100% - var(--panel-width)) 仍用旧值）
• 别用 MutationObserver 监听 style 变化 —— resize 频繁写像素值，会爆炸式触发，性能崩坏
• 也别监听 window.resize —— 这是窗口大小变化，和元素 resize 完全无关
• 真正可靠的时机是用户松手那一刻：mouseup 时读 offsetWidth，再 element.style.setProperty('--panel-width', w + 'px')

拖拽缩放时，--drag-x / --drag-y 怎么实时更新？

这类变量适合用 mousemove 中持续写入，但要注意节流和坐标计算精度：

• 在 mousedown 时记录鼠标相对于元素左上角的偏移：offsetX = e.clientX - rect.left
• 在 mousemove 中计算绝对位置：e.clientX - offsetX，再写入 document.documentElement.style.setProperty('--drag-x', ...)
• 避免用 getBoundingClientRect().left 动态算 —— 每次调用都触发重排，卡顿明显；固定 offset 更轻量
• 记得在 mouseup 解绑 mousemove，否则拖出边界后还在写变量

为什么用 div + resize 比 textarea 更可控？

textarea 虽然原生支持 resize 并触发 input 事件，但语义和行为严重偏离布局容器需求：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• input 在拖拽中高频触发，容易引发 layout thrashing，尤其当右侧区域依赖该变量做 calc 计算时
• 必须加 readonly、user-select: none、border: none 等掩盖其表单特性，代码更重
• resize: horizontal 在部分浏览器仍可能被垂直拖动误触，无法精确约束方向
• 后续若要加边界限制、等比缩放或拖拽移动，textarea 彻底不适用，得推倒重写

变量值超出 min-width / max-width 怎么办？

CSS 变量本身不校验合法性，JS 同步时必须主动检查：

• 读取目标元素的 getComputedStyle(el).minWidth 和 maxWidth（注意单位，可能是 px 或 em）
• 把 offsetWidth 转成数值后，与 min/max 对比，截断再写入：Math.max(minW, Math.min(maxW, w))
• 不要依赖 CSS 的 min-width 自动生效 —— 它只约束渲染，不影响变量值，而其他元素可能用该变量做逻辑判断

最易被忽略的是：CSS 变量作用域。写入时用 element.style.setProperty() 是局部的，但如果多个面板共用同一变量名，且都写到 :root，就会互相覆盖。缩放/拖拽类组件务必用元素级作用域，别图省事全塞进 document.documentElement。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！