如何使用CSS3的writing-mode实现移动端垂直排版适配？-css教程-PHP中文网

writing-mode: vertical-rl 在移动端需配合 text-orientation: mixed、显式 height 和真机测试才可靠，否则因字符朝向不统一、盒模型翻转导致文字歪斜或塌陷。

如何使用css3的writing-mode实现移动端垂直排版适配？

writing-mode: vertical-rl 在移动端能用，但必须配合 text-orientation: mixed、显式 height 和真机测试，否则大概率失效或错位。

为什么只写 `writing-mode: vertical-rl` 文字会歪或塌陷？

因为该属性只改文本流方向，不控制字符朝向：英文字母和数字默认顺时针转 90°，汉字却直立；同时块级容器的盒模型语义翻转——height 变成“视觉宽度”，width 变成“列高”。没设 height 就会塌成一条线。

text-orientation: mixed 是中英文混排的底线配置，让汉字直立、西文保持水平
必须手动设 height（比如 height: 200px），不能依赖 auto 或 min-height
white-space: nowrap 防止短文本在窄屏里意外换行

微信和旧版 iOS 怎么检测并降级？

微信 Android（尤其 8.0.30 之前）X5 内核基本忽略 writing-mode；iOS 微信则取决于系统 WebKit 版本，iPhone 6s 及更早设备大概率不生效。

运行时检测：getComputedStyle(el).writingMode !== 'vertical-rl' 时触发降级
别用图片降级——可用 transform: rotate(90deg) + overflow: hidden 模拟，但注意 touch 坐标偏移
降级后需重设 width/height，因为旋转后尺寸逻辑反转

竖排容器里用 flex 或 grid 会出什么问题？

直接给 display: flex 或 display: grid 的父容器加 writing-mode，会导致主轴定义冲突、子项堆叠错位、justify-content 含义反转。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

导航栏等结构化内容，优先用 flex-direction: column + text-orientation: upright 替代
若必须嵌套，只对纯文本子元素（如  或 ）应用 writing-mode
避免用 text-align: right 对齐——它在竖排下实际是顶部对齐；改用 text-align: start 或 margin-block-start

字体 fallback 和标点怎么处理才不崩？

不是所有中文字体都支持竖排渲染：系统默认的 -apple-system 在竖排时可能压扁标点，某些字体甚至让破折号——、省略号…歪斜或错位。

font-family 必须写全："PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif
纯数字串（如 2024）会整体躺倒，想正立就得单独包一层  并设 text-orientation: upright
避免用 text-orientation: sideways——它会让汉字也躺倒，完全违背中文排版意图

真正麻烦的不是写几行 CSS，而是不同 WebView 对 writing-mode 的实现差异太碎：同一段代码，在 iOS Safari 16、微信 iOS、微信 Android、Chrome for Android 上表现可能完全不同。真要上线，必须每种环境都拿真机跑一遍，不能只靠模拟器或桌面调试器。