如何适配屏幕

1.页面尺寸比与屏幕尺寸比的关系

首先设计稿的项目宽高比是16:9

大屏可视化需要用同一个页面，适配各种尺寸的屏幕。当显示屏幕的尺寸比与页面的尺寸比不一致时，则需要将页面尽可能放大居中显示，其余地方留白。

以16:9为例，当显示屏幕的尺寸比小于16:9时，整个页面应该垂直居中，页面有效宽度与屏幕宽度相同。

当显示屏幕的尺寸比大于等于16:9 时，整个页面应该水平居中，页面有效高度应该与屏幕高度相同。

计算方法

Wp 为页面有效宽度
Hp 为页面有效高度
页面左右居中，上下居中，四周留白即可
然后在 head 里用 JS 设置 1rem = Wp / 100

* 2.动态 rem 方案

为了适配不同的屏幕，在页面布局时要使用自适应布局，即不能使用固定像素，需要用相对单位 rem 。em 是相对于父元素的字号的比例，rem 是相对于根元素 html 的字号的比例。为了使用上的方便，需要为根元素设置合适的字号。如果将页面有效宽度看成100份的话，我们希望 1rem=(Wp/100)px 。因此将根元素的字号设置为Wp/100 即可。
当我们根据设计图进行布局时，我们能得到的是每个区域的像素值 px ，我们需要一个计算公式将 px 转换为 rem 单位。

适配一个div

div在设计稿的宽度：

换算公式封装成CSS函数

css 复制代码

@function px($n) {
  @return $n / 2420 * 100rem;
}

代码实现

在 <head> 中用 JS 获取到浏览器（即设备）的高度和宽度，并为根元素设置合适的字号。这部分可以定义为 initHTMLFontSize 函数

TSX 复制代码

const clientHeight = document.documentElement.clientHeight
const clientWidth = document.documentElement.clientWidth

const pageWidth = (clientWidth / clientHeight < 16 / 9 && clientWidth > 500)? clientWidth : clientHeight * 16 / 9
const pageHeight = pageWidth * 9 / 16
window.pageWidth = pageWidth
window.pageHeight = pageHeight
document.documentElement.style.fontSize = `${pageWidth / 100}px`

在 <body> 底部用 JS 设置页面的有效高度和宽度，并使页面有效内容 #root 垂直居中。

这部分则定义为 initPagePosition 函数

TSX 复制代码

const root = <HTMLElement>document.querySelector('#root')
root.style.width = window.pageWidth + 'px'
root.style.height = window.pageHeight + 'px'
root.style.marginTop = (document.documentElement.clientHeight - window.pageHeight) / 2 + 'px'

使页面有效内容 #root 水平居中只需用 CSS 设置margin-left: auto ，margin-right: auto即可

3.Grid 布局划分各图表区域

在容器 <main> 标签里面用 grid-template-areas 给各图表写好分区，每一个栏位使用一个变量表示，对应的 item 内设置 grid-area 即可。

再用 grid-template-columns 和 grid-template-rows 来设定每行每列的长度，设定长度时可以用 fr 来按比例分配。
grid-column-gap 和 grid-row-gap 用来设置列与列，行与行之间的间隙。