textarea自由缩放需js+css配合：resize: both必须搭配min-width/min-height，移动端需显式设置，js控制应避免直接改width/height而用scrollheight或transform+容器隔离。
用 textarea 实现自由缩放，但默认行为不等于“自由”
浏览器里 textarea 默认可拖拽缩放，但这只是 UI 行为，不是可控的“自由缩放”。它受 CSS resize 属性控制，且只在用户手动拖拽时生效，无法用 JS 直接设置宽高或动画缩放。很多人误以为加个 resize: both 就万事大吉，结果发现：拖不动、缩不回、移动端失效、或跟父容器冲突。
关键点在于：resize 只影响用户交互，不提供 API；想真正“自由”，得靠 JS + CSS 配合控制尺寸。
resize: both 必须配合明确的 min-width/min-height
直接写 resize: both 很可能没反应——因为浏览器要求元素有**初始尺寸约束**才允许缩放。没有 min-width 和 min-height，Chrome/Firefox 会忽略该声明。
-
min-width和min-height必须是具体值（如100px），不能是auto或0 - 如果父容器用
display: flex，textarea可能被拉伸变形，需加flex-shrink: 0 - 移动端 Safari 默认禁用
resize，必须显式设resize: vertical或resize: none才生效（both无效）
textarea {
resize: both;
min-width: 200px;
min-height: 100px;
width: 100%;
max-width: 600px;
}
用 JS 主动控制尺寸时，别直接改 style.width 和 style.height
直接写 el.style.width = '300px' 会覆盖 CSS 的 width: 100%，破坏响应式布局。更糟的是：若用户刚拖完，再 JS 设置尺寸，会丢失拖拽状态，且无法还原。
正确做法是用 style.minWidth/style.minHeight 或添加临时 class 控制边界，再让 textarea 自适应内容高度（用 scrollHeight）：
- 监听
input事件，动态设el.style.height = el.scrollHeight + 'px'（适合垂直自适应） - 若要支持宽高双向缩放，用
getBoundingClientRect()获取当前尺寸，再通过style.minWidth和style.minHeight锁定下限 - 避免在
resize事件里反复读写offsetWidth，会触发强制同步布局，卡顿明显
真正“自由”的缩放需要绕过 resize，用 transform: scale() + 容器隔离
如果需求是“像图片一样缩放整个输入框”，resize 无能为力。此时应把 textarea 包进一个固定尺寸容器，用 transform: scale() 缩放它，并同步调整 transform-origin 和光标位置。
但要注意：scale() 不改变文档流尺寸，会导致焦点错位、滚动异常、键盘输入框抖动。必须搭配以下处理：
- 容器设
overflow: hidden，防止缩放后内容溢出 - 用
pointer-events: none关闭容器事件，确保点击穿透到textarea - 监听缩放级别，动态重设
textarea的font-size，否则文字会模糊或挤在一起
这个方案复杂度陡增，多数场景其实只需要可拖拽 + 内容自适应高度，而非视觉缩放。
真正容易被忽略的点：缩放后的 textarea 在打印预览或截图时尺寸会失真；iOS 上 transform 缩放常导致软键盘弹出异常；所有方案都绕不开对 user-select 和 caret-color 的微调——这些细节不试一遍根本想不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
