如何使用 rem 和 px 函数适配各种屏幕

要适配各种的屏幕，那么16:9的比例是合适的。要做到屏幕宽的时候，是左右居中的；屏幕高的时候，是上下居中的。这里给出一个公式可以计算出我们需要的页面的有效宽度和页面的有效高度。 算法：

1. 当设备的宽度/设备的高度 >16:9 ,那么页面的有效宽度=设备的高度*16/9
2. 当设备的宽度/设备的高度 <16:9 ,那么页面的有效宽度=设备的宽度
3. 页面的有效高度=页面有效宽度*16/9

如果发现页面像素不起作用怎么办，我们应该使用rem来计算。

1. 页面的大小=设计稿的大小/设计稿的宽度100rem

假设一个div在页面中的长为100px,设计稿宽度为1920px。那么这个div在页面中长就为100/1920*100rem。 最后我们可以写一个函数px()来计算100p对应的rem。

const px = (n) => n / 2420 * (window as any).pageWidth;

如何使用 grid 布局

grid布局分为行和列。使用grid-template，它的属性有：[grid-template-rows][grid-template-columns]与[grid-template-areas]

display: grid;
    grid-template:
      "box1 box2 box4 box5" 755fr
      "box3 box3 box4 box5" 363fr / 366fr 361fr 811fr 747fr;
    grid-column-gap: px(28);
    grid-row-gap: px(28);

上面代码先设置区域，后755fr 、363fr代表每行的高度 /后的366fr、361fr、811fr、747fr代表每列的宽度 grid-column-gap代表列的间隙，grid-row-gap代表行的间隙。

如何使用 echarts

首先安装

npm install echarts --save

在模块中引入

import * as echarts from 'echarts';

使用echart

 useEffect(() => {
    var myChart = echarts.init(divRef.current);
    myChart.setOption(createEchartsOptions({
      color: '#F7A110',
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [0, 18, 28, 38, 48, 58, 68, 78],
        splitLine: {show: true, lineStyle: {color: '#073E78'}},
        axisTick: {show: false},
        axisLine: {show: false},
      },
      yAxis: {
        type: 'value',
        splitLine: {lineStyle: {color: '#073E78'}},
        axisLabel: {
          formatter(val) {
            return val * 100 + '%';
          }
        }
      },
      series: [{
        type: 'line',
        data: [
          0.19, 0.20, 0.26,
          0.35, 0.26, 0.20,
          0.08, 0.06
        ],
        symbol: 'circle',
        symbolSize: px(12),
        lineStyle: {width: px(2)},
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#F7A110'
          }, {
            offset: 1,
            color: '#1B1D52'
          }]),
        }
      }]
    }));
  }, []);