1.如何适配屏幕

思路

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

如果屏幕的宽/高大于16:9，我们就需要优先水平方向上局中，然后等比例放大我们的项目，让高度与屏幕高度相同，左右局中。在不超过屏幕尺寸的前提下我们的布局就可以达到最大化。

反过来如果宽/高小于16:9，就要尽量让宽度和屏幕宽度一样，然后垂直居中就OK了。

计算方法

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

适配一个div

div在设计稿的宽度：

假设一个div在设计稿中长100px，设计稿宽度为2420px，那么div在页面中的长度为100/2420*100rem,用函数表示则为：

 const clientWidth = document.documentElement.clientWidth;
 const clientHeight = document.documentElement.clientHeight;
 window.pageWidth=clientWidth/clientHeight>16/9 ? clientHeight*(16/9) :clientWidth;
 const pageHeight = pageWidth/(16/9)
 const px = (n) => (n / 2420) * (window as any).pageWidth;

div水平垂直居中

水平方向:直接margin：0 auto就可以居中。

垂直方向:可以用浏览器的高度减去div的高度，得到的值除以2，将这个值设置为div的margin-top，div就可以垂直居中了。

  root.style.height =pageHeight+'px'
  root.style.marginTop =(clientHeight-pageHeight)/2+'px'

2.使用 grid 布局

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

display: grid;
    grid-template:
    grid-template-rows: 755fr 363fr;
    grid-template-columns: 366fr 361fr 811fr 747fr;
    grid-gap: 28 / 2420 * 100rem; //行间距
    grid-template-areas: 'box1 box2 box4 box5'
                       'box3 box3 box4 box5';

3.使用 echarts

首先需要安装echarts

npm install echarts --save

在项目中引用：

import * as echarts from 'echarts';

然后根据官网中的示例来设置自己所要的样式

可视化项目总结