直接用 resize 实现分屏对比会失效，因为 resize 仅对可调整大小的替换元素或 overflow 非 visible 的块级元素生效，而普通 div 默认 overflow: visible，即使设置 resize: both 也无反应。
为什么直接用 resize 实现分屏对比会失效
因为 resize 是 CSS 属性，只能作用于可调整大小的替换元素（如 textarea）或设置了 overflow: hidden|auto|scroll 且非 overflow: visible 的块级元素。普通 div 默认 overflow: visible，即使加了 resize: both 也完全没反应——这是最常卡住的第一步。
如何让任意容器支持拖拽分隔（Flex + resize 组合）
核心是「伪造可缩放容器」：用一个带 resize 的 textarea 覆盖在 Flex 子项上，监听其 resize 事件，动态更新 Flex 的 flex-basis 或 width。注意不能直接对 Flex 项目设 resize，它不触发重排。
- 用
textarea作为透明控制层，position: absolute覆盖在分隔线上，宽高设为10px，resize: horizontal，opacity: 0 - 监听
textarea的resize事件，读取clientWidth或计算相对比例，更新左侧容器的style.flexBasis - Flex 容器必须设
display: flex且子项用flex: 0 1 auto（禁用伸缩，只允许基础尺寸变化） - 避免用
%或vw作为初始flex-basis，否则拖拽后比例计算易失准；推荐用px或calc()配合min-width/max-width
移动端适配时 resize 为何完全不工作
resize 在所有主流移动浏览器中被禁用（iOS Safari、Chrome for Android 均不支持），不是 bug 是设计限制。试图在手机上拖拽分隔线会毫无响应，且无任何报错。
- 替代方案只能是：用
touchstart/move/end模拟拖拽，监听手指位移，实时更新flex-basis - 需额外处理
touch-action: none防止页面滚动干扰 - 务必加
user-select: none和-webkit-user-drag: none，否则 iOS 上可能触发文字选中或图片拖拽 - 不要依赖
resize事件做关键逻辑，它本身不可靠——PC 端也可能被用户禁用（如某些浏览器扩展）
Flex 分屏对比的性能隐患在哪
每次拖拽都直接改 style.flexBasis 会强制同步重排（reflow），高频 touchmove 下容易掉帧。尤其当对比区域含大量 DOM 或复杂 CSS 动画时，卡顿明显。
- 用
requestAnimationFrame节流touchmove更新逻辑，避免每帧都写样式 - 优先用
transform: translateX()移动右侧内容（不触发布局），配合overflow: hidden隐藏溢出，比直接缩放左区更流畅 - 若需精确宽度反馈（如显示百分比），把计算逻辑放在 RAF 回调里，但样式更新仍延迟一帧
- 避免在拖拽过程中读取
offsetWidth等布局属性，这会强制同步计算，加剧卡顿
overflow 或漏了 touch-action，就会在某个设备上静默失败。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
