一、场景

一个做数据监控的单页面，页面主要内容是一个整体必须是宽屏才能正常展示，这时就不能用传统的适配方案了，需要页面旋转为横屏展示

本场景中：

尺寸相对单位使用 vh（视高的1%）
展示内容类似脑图，根在上（数据源），分四层，每层节点较多所以只能横屏展示
未使用第三库（无法直接展示为根左向右数据分发）

二、方案

相对原PC页，重构过程中主页面只增加判断逻辑（不直接判断是否手机端，只判断可见窗口宽高比）：

js 复制代码

const isPhone = document.body.clientWidth < document.body.clientHeight

样式文件（css-in-js）分两种：

布局：layout.js（使用了@emotion/react）
样式：style.js（正常 js-obj）

其中 layout.js 分开两种：

layout.js（保持原状）
layoutPhone.js（直接 vh 改 vw，且最外层容器旋转 transform：rotate(90deg)）

注意：由于被旋转元素的基点默认为自身的中心点。因此需要设置一下它的旋转中心为左上角（transform-origin: 0% 0%；），这样页面被"转出了屏幕"停留在屏幕的左侧，最后一步只需要将它往右平移一个屏幕的宽度就刚刚好（left：100vw），如下:

js 复制代码

export const Container = styled.div`
  ...
  transform：rotate(90deg);
  transform-origin: 0% 0%;
  position: absolute;
  left: 100vw;
`

style.js 使用变量 $h 保存垂直预览页面时，视图高度代表设备的高或宽

PC端：$h = 'vh'
手机端：$h = 'vw'

其他情况自行兼容处理。。。

over

三、书单推荐

01 《深入实践Kotlin元编程》

《深入实践 K o t l i n 元编程》《深入实践Kotlin元编程》《深入实践Kotlin元编程》
作者：霍丙乾作者：霍丙乾作者：霍丙乾

推荐语：猿辅导资深Kotlin专家、Google开发者专家撰写，Kotlin中文站负责人等多位专家推荐，降低元编程学习门槛。

这是一本从基础知识、设计思想、技术方案、应用方法、实践技巧5个维度系统讲解Kotlin元编程，并以此大幅提升Kotlin工程师开发水平、研发效率和开发体验的著作。

作者是Kotlin领域的资深专家和布道者，本书源于他对Kotlin编译器源码的反复研读和大量的工程实践，不仅细致讲解了反射、程序静态分析、 Java注解处理器、Kotlin符号处理器、Kotlin编译器插件、元程序的开发和调试等核心元编程技术，而且详细剖析了Jetpack Compose的编译器插件和IntelliJ 插件、AtomicFU 的 JVM 字节码和JavaScript代码的生成逻辑。

02 《Spring Boot学习指南》

《 S p r i n g B o o t 学习指南》《Spring Boot学习指南》《SpringBoot学习指南》
构建云原生 J a v a 和 K o t l i n 应用程序构建云原生Java和Kotlin应用程序构建云原生Java和Kotlin应用程序
作者： [ 美 ] 马克 ⋅ 赫克勒 ( M a r k H e c k l e r ) 作者：[美]马克·赫克勒(Mark Heckler) 作者：[美]马克⋅赫克勒(MarkHeckler)

推荐语：行业专家撰写，涵盖开发Spring Boot 应用程序的诸多复杂细节，代码示例相互关联且易于理解。

本书将带你理解Spring Boot的架构和方法，包括调试、测试和部署等主题。如果你想使用Spring Boot来快速、有效地开发云原生Java或Kotlin应用程序(使用响应式编程、构建API以及创建各种数据库访问)，那么本书就是为你准备的。

03 《Kotlin编程实战》

《 K o t l i n 编程实战》《Kotlin编程实战》《Kotlin编程实战》
创建优雅、富于表现力和高性能的 J V M 与 A n d r o i d 应用程序创建优雅、富于表现力和高性能的JVM与Android应用程序创建优雅、富于表现力和高性能的JVM与Android应用程序
作者： [ 美 ] 文卡特 ⋅ 苏布拉马尼亚姆作者：[美]文卡特·苏布拉马尼亚姆作者：[美]文卡特⋅苏布拉马尼亚姆

推荐语：Jolt Productivity获奖作者编写，Kotlin首席设计师Andrey Breslav作序推荐，助你开启通往Kotlin世界的大门。

阅读本书，不仅可以通过易于理解的示例学习使用Kotlin语言的许多特性，还可以学习编写易于维护、高性能的JVM和Android应用程序，创建DSL和异步编程等。

本书会带你使用你喜欢的IDE并利用大量示例和练习来提高你的Kotlin技能。你将学习创建独立的小程序并以脚本的形式运行，创建类型安全的代码，然后将这些知识进一步拓展，以创建易于扩展的、完全面向对象的、函数式风格的代码。还将学习如何在不影响效率或性能的情况下优雅地编程，以及如何使用元编程来创建高度富有表现力的代码，并创建利用语言流畅性优势的内部DSL。与此同时，你也会学习协程、异步编程、自动化测试的相关知识，并学习在企业级应用中混合使用Kotlin与Java。

【实战】H5 页面同时适配 PC & 移动端 —— 旋转横屏