大屏可视化适配
如何适配屏幕
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函数
@function px($n) {
@return $n / 2420 * 100rem;
}
代码实现
在 <head> 中用 JS 获取到浏览器（即设备）的高度和宽度，并为根元素设置合适的字号。这部分可以定义为 initHTMLFontSize 函数
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 函数
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 用来设置列与列，行与行之间的间隙。
.home > main {
flex: 1;
display: grid;
grid-template-areas:
"box1 box2 box4 box5"
"box3 box3 box4 box5";
grid-template-columns: 366fr 361fr 811fr 747fr;
grid-template-rows: 755fr 363fr;
grid-column-gap: px(28);
grid-row-gap: px(28);
.section1 {
grid-area: box1;
}
.section2 {
grid-area: box2;
}
.section3 {
grid-area: box3;
}
.section4 {
grid-area: box4;
}
.section5 {
grid-area: box5;
}
}
作者：用户45275688681
来源：juejin.cn/post/7308434215811924018
来源：juejin.cn/post/7308434215811924018
