[大屏可视化] 用REM适配各尺寸屏幕

前言

对于大屏可视化来说，适配屏幕是一个重要的内容，一旦画面的格式出现了错误，对于整体的观感是毁灭性的打击。在我的这个项目中，我使用了动态REM来进行屏幕适配

如何适配屏幕？

一般来说，前端做出来的页面都有一个固定的比例，而显示页面的大屏的比例不固定，因此就会出现画面的压缩或者拉伸，因此我们需要固定页面的比例

假设我们制作的页面是16:9的，那么我们的页面有效宽度：页面有效高度=16:9

而对于显示设备而言，如果设备的宽度：设备的高度>16:9，也就是显示设备长边非常长，即

那么我们的页面有效高度=设备高度，并设置水平居中，就可以了

如果设备的宽度：设备的高度<16:9，也就是设备的高很大，即

那么我们应该设置页面有效宽度=设备宽度，并垂直居中

const clientWidth = document.documentElement.clientWidth
const clientHeight = document.documentElement.clientHeight
const pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * 16 / 9 : clientWidth
const pageHeight = pageWidth / (16 / 9)
root.style.width = pageWidth + 'px'
root.style.height = pageHeight + 'px'

如此以来，我们的页面的比例就正确了，那么我们的元素的尺寸怎么办呢？尺寸的单位一般有px,pt,pc,in,cm,mm,%,em,ex,vh,vw，显然我们不能写死尺寸，因此需要能动态调整的单位，因此只剩下了em,ex,vh,vw，通过上面的分析，vh和vw显然不合适，因为我们页面的尺寸并不确定，因此只剩下了em和ex，由于ex通常是1/2em，因此我们使用em，由于每个元素的em都可能不相同，因此我们需要一个能相对固定不变的em，那就是rem，root元素的em

什么是REM

众所周知，有一个单位是em，代表了1字符长度，也就是fontsize，因此rem就是root元素的fontsize

怎么做动态REM？

在本项目中，我们使用页面宽度的1%来做rem

<style>
  html{
    font-size:${pageWidth / 100}px
  }
</style>

还原设计稿

准备工作都做好了，我们开始设计时，所有的尺寸单位都要变为rem，比如在一个1920px * 1080px的设计稿中，某个元素的宽度为192px，那我们在设置时就要设置为10rem，进行这样的换算很麻烦，因此我们通过一个函数来解决这个问题

const px = (n: number) => n / 1920 * (window as any).pageWidth;

@function px($n) {
  @return calc($n / 1920) * 100rem
}

这样我们只需要设置宽度为px(192)就可以，不需要自己换算

至此大屏可视化的适配就完成了

后记

这是我自己的一点心得，如果你有更好的方法，可以留言告诉我~