writing-mode 是响应式垂直排版中唯一能保持语义、交互与可访问性的原生方案；用 transform 或 js 模拟会破坏文字选择、屏幕阅读器顺序及 seo；vertical-rl 必须搭配 text-orientation 控制西文方向，且需重置容器尺寸、慎用 flex/grid。
writing-mode 在响应式垂直排版中不是“可选增强”，而是**唯一能保持文本语义、交互与可访问性的原生方案**。用 transform: rotate(90deg) 或 JS 重排模拟竖排，会直接破坏文字选择、复制、屏幕阅读器顺序、缩放行为和 SEO 文本结构。
vertical-rl 必须搭配 text-orientation 才能真正可用
只写 writing-mode: vertical-rl，中文能竖，但英文数字会顺时针躺倒——这不是 bug，是规范默认行为（text-orientation: mixed）。出版级效果必须显式控制：
-
text-orientation: mixed：汉字直立，西文/数字/半角标点水平（古籍类界面适用） -
text-orientation: upright：所有字符强制直立（现代电子书、含 URL/人名/术语场景推荐） - 绝对别用
text-orientation: sideways——它会让汉字也躺倒，彻底失去中文排版意义
响应式切换时容器尺寸必须成套重置
从横排切到竖排，height 和 width 的语义完全翻转：height 变成“列宽”，width 变成“行长”。不重置就会出错：
- 竖排下
height: auto失效 → 容器塌成一条线 → 必须设明确height或max-height - 横排切回竖排时，旧的
width/height值残留 → 文字截断或留大片空白 - 用逻辑值替代物理值：
text-align: start比text-align: right更安全；竖排时margin-block-start替代margin-top
移动端竖排滚动卡顿的真因与解法
iOS 上竖排容器开启 overflow-y: auto 后惯性滚动失效，不是性能问题，是 WebKit 渲染管线未激活触控优化：
- 必须加
-webkit-overflow-scrolling: touch，否则滚动卡顿、拖拽迟滞 - 禁用
min-height或fit-content—— 竖排下它们计算异常，优先用固定height或max-height - 内容动态加载时，切换前先强制重排：
el.style.height = 'auto'; el.offsetHeight; el.style.height = '400px';
Flex/Grid 容器上直接用 writing-mode 是高危操作
writing-mode 会重载主轴定义，和 flex-direction 或 grid-template 冲突：
- 按钮堆叠溢出、
justify-content含义反转、子项消失是常态 - 正确做法：只对纯文本块（如
<p></p>、<span></span>）应用writing-mode - 若需竖排导航栏，优先用
display: flex+flex-direction: column+transform: rotate(90deg)（注意屏幕阅读器兼容性）
writing-mode 的实现差异太碎：同一段代码，在 iOS Safari 16、微信 iOS、微信 Android、Chrome for Android 上表现可能完全不同。真要上线，必须每种环境都拿真机跑一遍。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
