resize是浏览器原生行为，直接写内联样式但不触发事件，JS无法自动感知变化；必须通过mouseup或requestAnimationFrame主动读取offsetWidth并同步到CSS变量。
纯 CSS 的 resize 属性能实现拖拽调整大小，但它只改元素自身宽高，不自动同步到其他依赖变量（比如 JS 中的 panelWidth 或 CSS 自定义属性），必须手动桥接。
为什么 resize 改了尺寸，但 JS 拿不到新值？
resize 是浏览器原生行为，它直接写内联样式：style="width: 320px; height: 240px;"。但这个过程不触发 resize 事件（注意：不是 window.resize），也不通知 JS。所以你在 getBoundingClientRect() 里能读到新尺寸，但若没主动轮询或监听，就“不知道变了”。
- 别指望
MutationObserver监听style变化——太重，且 resize 写的是计算后像素值，频繁触发不可控 -
input或change事件对div无效，仅适用于表单控件（如textarea） - 真正可用的钩子只有：在用户松手后，用
setTimeout(() => {...}, 0)或requestAnimationFrame去读取最新尺寸
如何让 CSS resize 和 CSS 变量（--panel-width）保持一致？
不能靠 CSS 自己同步——resize 不支持绑定自定义属性。必须用 JS 桥接一次：
- 监听目标元素的
mousedown（拖拽开始）和mouseup（拖拽结束） - 在
mouseup回调里，读取element.offsetWidth或getComputedStyle(element).width - 用
element.style.setProperty('--panel-width', width + 'px')写入变量 - 如果要响应式更新其他元素（比如右侧自适应区域），确保它们用
calc(100% - var(--panel-width))计算宽度
示例关键代码：
立即学习“前端免费学习笔记（深入）”；
const panel = document.querySelector('.resizable-panel');
panel.addEventListener('mouseup', () => {
const w = panel.offsetWidth;
panel.style.setProperty('--panel-width', `${w}px`);
});
textarea 能绕过 JS 吗？它和普通 div 有啥区别？
textarea 是少数原生支持 resize 且自带 input 事件的元素。拖拽时会连续触发 input，可直接监听：
<textarea class="resizable" style="resize: both; overflow: auto;"></textarea>- JS 中
el.addEventListener('input', () => console.log(el.clientWidth))就能实时捕获 - 但
textarea的内容模型、换行、聚焦逻辑和普通面板冲突，不适合做 UI 面板容器 - 若硬要用，得加
readonly+user-select: none+border: none等掩盖表单特征，不如老实用div+ JS 桥接
容易被忽略的兼容性与体验陷阱
Firefox 和 Safari 对 resize 的处理差异很大，尤其在伪元素、transform、flex 容器中：
- 在
display: flex子项上设resize，Chrome 有效，Firefox 可能完全不显示拖拽手柄——必须加min-width: 0; min-height: 0 -
transform: scale()放大 resize 区域时，Safari 会错位，建议只用width/height+overflow控制可见区域 - 移动端默认禁用
resize（iOS Safari、Android Chrome），无法通过 CSS 开启；必须用 touch 事件 + JS 实现 - 如果面板里有
iframe或第三方组件，resize拖拽可能被其pointer-events阻断，需检查层级和事件捕获路径
真正稳定的做法，是把 resize 当作降级方案，核心逻辑始终走 JS 控制尺寸 + CSS 变量驱动布局，resize 只负责提供一个免写拖拽逻辑的快捷入口。
