rows 和 cols 仅作语义 fallback，非尺寸控制；真实尺寸必须由 css 主控，推荐用 width、min-height、max-height、resize、box-sizing 组合实现可控布局。
rows 和 cols 不是像素单位，别当尺寸控制用
它们只是浏览器按默认等宽字体（如 Courier）估算的“约几行高”“约几字符宽”，rows="4" 不等于 4 × line-height，cols="50" 在中文下往往只能显示 25–30 个汉字。改了 font-size、换掉 font-family、放进 flex 容器，这些值就彻底失准。
常见错误现象：
- 设了
cols="40"，用户输入中文，一行只塞下 22 个字，以为自己写错了 -
rows="5"在font-size: 18px下只剩 2 行可见，内容被滚动条吞掉 - 在移动端缩放页面后，
rows和cols渲染完全错位，甚至触发异常换行
现代项目里 rows/cols 只该当语义 fallback
辅助技术（比如屏幕阅读器）会读取 rows 值作为“初始可见行数”的语义信息，但它不该承担布局责任。真实尺寸必须由 CSS 主控——否则一改全局样式，所有文本域就集体“变形”。
推荐做法：
- 保留合理 fallback：比如
rows="4"+cols="30"，既提供语义，又不干扰视觉 - 移除或不设
cols也行，但别留空或填cols="1000"——IE11 会错乱 - 不要同时写
style="height: 100px"和rows="6"，后者会被忽略，且语义失效
真正可控的尺寸靠这组 CSS 组合
固定 height 会截断内容；只靠 width: 100% 在 flex/grid 里可能被压缩成一条线；没 box-sizing 会导致 padding 吃掉内容宽度。必须组合使用：
-
width: 100%或具体值（如width: 500px） -
min-height: 80px—— 保证至少显示 3–4 行，且允许撑开 -
max-height: 200px—— 防止无限拉高，超出后自然出滚动条 -
resize: vertical—— 明确允许拖拽；若禁用，必须确保min-height足够 -
box-sizing: border-box—— 必加，否则 padding 让实际编辑区变窄
示例：
<textarea style="width: 100%; min-height: 80px; max-height: 200px; resize: vertical; box-sizing: border-box;"></textarea>
动态改 rows 的副作用远比你想的严重
JS 直接赋值 textarea.rows = 8 看似简单，但会触发重排（reflow），而且只重算初始尺寸逻辑，不响应内容变化。更麻烦的是隐性覆盖：
- 如果之前写了
style.height，这个赋值会被无视 - 如果没同步设
cols，宽度可能突变（尤其在没配 CSS width 时） - 在 React/Vue 中绑定
rows属性，每次 re-render 都强制重排，滚动位置丢失 - 用
scrollHeight实现自适应高度时，忘了先清空内联style.height，第一次 resize 后高度就被卡死
真正需要动态调整高度时，优先用 min-height/max-height + resize: none + JS 监听 input 并设置 style.height = textarea.scrollHeight + "px"，而不是碰 rows。
最易被忽略的一点：哪怕你全用 CSS 控制，rows 的语义价值仍在——它影响屏幕阅读器播报，也影响表单校验提示的可访问性。删掉它容易，但补回来时往往已在线上出问题。
