大屏适配方案汇总

确定页面容器的有效宽高

以 1920 * 1080 的设计稿为例，当屏幕的宽高比：

• 等于 16:9 时，宽高都刚好占满屏幕
• 小于 16:9 时（说明设备较高），页面上下留白，左右占满并上下居中
• 大于 16:9 时（说明设备较宽），页面左右留白，上下占满并居中

始终保持页面宽高比例为 16:9

具体代码实现：

适配方案

vw 方案

原理：按照设计稿的尺寸，将 px 按比例计算转为 vw 和 vh
网页宽度 = 1920px = 100vw
1px = 100vw / 1920
以一个宽 300px 和 200px 的 div 来说，其所占的宽高，以 vw 和 vh 为单位：
div 宽 = 300 * (100vw / 1920)
div 高 = 200 * (100vw / 1920)

transform scale 方案

原理：利用 css 的 transform scale 对页面进行缩放。

如何缩放：

当屏幕宽高比 < 16:9（宽度确定），我们需要缩放的比例是屏幕宽度 / 设计稿宽度(1920)
当屏幕宽高比 > 16:9（高度确定），我们需要缩放的比例是屏幕高度 / 设计稿高度(1080)

如何居中：

1. 首先设置页面容器的基点为左上角transform-origin: 0 0;
2. 利用绝对定位将图表定位到中间位置

   1 2 3

   position: absolute; left: 50%; top: 50%;

3. 进行页面缩放时，将页面沿 x，y 轴各移动 -50% transform:translate(-50%,-50%)

rem 方案

原理：1rem = html font-size
用 js 设置 html 的 font-size 为屏幕宽度 / 100
因此 1rem = html font-size = 屏幕宽度 / 100，即 100rem = 屏幕宽度
以一个宽 300px 和 200px 的 div 来说，其所占的宽高，以 rem 为单位：
div 宽 = 300 * (100rem / 1920)
div 高 = 200 * (100rem / 1920)

我的理解是，用 rem 是为了让 CSS 单位跟视口的宽高相关联，然而 vw 天生与视口宽度关联（100vw = 视口宽度），所以直接用 vw 就好了

适配图表字体、间距、位移等尺寸

echarts 的字体大小只支持具体数值（像素），不能用百分比或者 vw 等尺寸；
可以编写一个工具函数，计算出当前屏幕宽度(innerWidth / clientWidth)和默认设计宽度(1920)的比值，将原始的尺寸乘以该值

注意：innerWidth 包含滚动条，clientWidth 不包含滚动条