在做公司做了很多大屏的项目之后，针对于屏幕适配，说实话有很多解决方案，例如媒体查询、scale缩放、Rem、vw等等，但每种方案都有其特定的使用场景，面对不同的项目，我们首先考虑的不是哪种方案最好，而是最合适。

总结了我司做的大屏项目以后，我写了这篇大屏适配完全解决方案，希望对您有所帮助。

先看项目效果图

项目1：地铁三维可视化大屏系统

总分辨率为固定为9600*2160，分为左--中--右三块屏幕拼接而成， 不会适配过大过小的屏幕

左屏分辨率：2880*2160

中屏分辨率：3840*2160

右屏分辨率：2880*2160

左中右拼接效果

项目2：景区数字孪生平台

基础分辨率为1920*1080，要求向上向下能适配16:9的屏幕

1920*1080

1280*720

2560*1440

3840*2160

7480*3240

项目3：xxx园区态势感知平台

多个2880*2160拼接

2880*2160

项目4：xxx综合执法平台

6000*2160

适配方案

适配方案不单单只是屏幕适配，包括里面的图标、DOM元素都要考虑到，下面分开来介绍

屏幕适配

vw和vh适配方案

• 按照设计稿的尺寸，将px按比例计算转为vw和vh

• 转换公式如下

假设设计稿尺寸为1920*1080（做之前一定问清楚UI设计稿的尺寸）

  即：
  网页宽度=1920px
  网页高度=1080px

  我们都知道
  网页宽度=100vw
  网页宽度=100vh
  
  所以，在1920x*1080px的屏幕分辨率下
  
  1920px = 100vw
  
  1080px = 100vh
  
  这样一来，以一个宽300px和200px的div来说，其作所占的宽高，以vw和vh为单位，计算方式如下:
  
  vwDiv = (300px / 1920px ) * 100vw
  vhDiv = (200px / 1080px ) * 100vh
  
  所以，就在1920*1080的屏幕分辨率下，计算出了单个div的宽高
  
  当屏幕放大或者缩小时，div还是以vw和vh作为宽高的，就会自动适应不同分辨率的屏幕

所以，我们每次写css时转换一下就好了，但是用计算器很慢，所以，我们要借助scss的函数来帮我们计算

安装scss

npm install sass@1.26.5 sass-loader@8.0.2  --save

封装计算工具函数

• 在src/styles下新建一个utils.scss文件，定义好设计稿的宽度和高度两个变量

• 在这里使用scss内置的math.div函数，定义两个vw和vh的计算函数

• 我们传入具体的像素值，其帮我们自动计算出vw和vh的值

util.scss

//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math"; 


//默认设计稿的宽度
$designWidth:1920;
//默认设计稿的高度
$designHeight:1080;

//px转为vw的函数
@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
}

//px转为vh的函数
@function vh($px) {  
  @return math.div($px , $designHeight) * 100vh;
}

路径配置

我这里使用的是vue2.6和vue-cli3搭建的vue项目，所以，我只需要在vue.config.js里配置一下utils.scss的路径,就可以全局使用了

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports={
  publicPath: '',
  configureWebpack: {
    name: "app name",
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  css:{
            //全局配置utils.scss,详细配置参考vue-cli官网
            loaderOptions:{
                sass:{
                     prependData:`@import "@/styles/utils.scss";`
                }
            }
  }
}

动态DOM元素适配

有的时候可能不仅在.vue文件中使用，比如在js中动态创建的DOM元素

它可能是直接渲染到html里面的

let oDiv = document.createElement('div')
document.body.appendChild(oDiv)

这样的话，我用了以下两种处理方式,来给创建的div设置样式

1.定义全局的class样式

在scr/styles目录下新建一个global.scss文件，在main.js中引入

global.css

.global-div{
        width: vw(300);
        height: vw(200);
        background-color: green;
    }

main.js

import './styles/global.scss'

使用时，给创建的div设置className

let oDiv = document.createElement('div')
oDiv.className = "global-div"

2.定义js样式处理函数

这种处理方式和scss处理函数类似，只不过使用了纯js将px转为vw和vh

在src/utils目录下新建一个styleUtil.js文件，内容如下

//定义设计稿的宽高
const designWidth = 1920;
const designHeight = 1080;

let styleUtil = {
    // px转vw
    px2vw: function (_px) {
        return _px * 100.0 / designWidth + 'vw';
    },
    // px转vh
    px2vh: function (_px) {
        return _px * 100.0 / designHeight + 'vh';
    },

};

export default styleUtil;

使用时，单独设置宽高等属性

import styleUtil from "./src/utils/styleUtil.js"

let oDiv = document.createElement('div')
oDiv.style.width = styleUtil.px2vw(300)
oDiv.style.height = styleUtil.px2vh(200)
oDiv.style.margin = styleUtil.px2vh(20)

不过这种使用方式有种弊端，就是屏幕尺寸发生变化后，需要手动刷新一下才能完成自适应调整

Echarts图表适配和封装

为何要封装？

• 每种图表的option配置都有类似，每次都要在业务代码里重写，十分冗余

• 在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作

• 可能有一些开发者忘记考虑echarts更新数据的特性，以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新，窗口缩放引起echarts图形变形问题

封装后实现的效果

• 业务数据和样式配置数据分离，我只需要传入业务数据就行了

• 它的大小要完全由使用者决定

• 不会因为缩放出现变形问题，而是能很好地自适应

• 有时候某个图表的样式可能有点不一样，希望能保留自己配置样式的灵活性

• 无论传入什么数据都能正确地更新视图

• 如果我传入的数据为空，能展示一个空状态

封装的建议

• 将所有的图表组件都放在components/Chart文件夹中

• 每种图表单独新建一个文件夹,如components/Chart/PieChart，components/Chart/LineChart等

• 每种图表中都有一个默认的defaultOption.js配置文件

• 图表的须有一个README.md文件

依赖项

• "echarts": "^5.1.2",

• "element-resize-detector": "^1.2.3",

• "lodash": "^4.17.21",

具体封装，以饼图为例

<template>
    
  <h3 v-if="isSeriesEmpty">暂无数据</h3>
  
  <div v-else class="chart">
    
  </div>
</template>

<script>
  
import * as Echarts from "echarts"
import ResizeListener from "element-resize-detector";
import { merge, isEmpty } from "lodash";
import {basicOption} from "./defaultOption.js"
import {pieChartColor} from "./../color.js"

  export default{
            name: "PieChart",
            props: {
                // 正常的业务数据，对应echarts饼图配置中series[0].data
                seriesData: {
                  type: Array,
                  required: true,
                  default: () => [],
                },
                // 表示需要特殊定制的配置
                // 一般UI会规定一个统一的设计规范（比如颜色，字体，图例格式，位置等）
                // 但不排除某个图标会和设计规范不同，需要特殊定制样式，所以开放这个配置，增强灵活性
                extraOption: {
                  type: Object,
                  default: () => ({}),
                },
              },
              data() {
                return {
                  chart: null,
                };
              },

                computed:{
                        isSeriesEmpty() {
                          return (
                            isEmpty(this.seriesData) || this.seriesData.every((item) => !item.value)
                          );
                        },
                },


              watch: {
                seriesData: {
                  deep: true,
                  handler() {
                    this.updateChartView();
                  },
                },
              },

            mounted() {
                    this.chart = Echarts.init(this.$el);
                    this.updateChartView();
                    window.addEventListener("resize", this.handleWindowResize);
                    this.addChartResizeListener();
            },
            beforeDestroy() {
              window.removeEventListener("resize", this.handleWindowResize);
            },

            methods:{
                    /* 合并配置项和数据，对于需要自定义的配置项以及数据，使用merge函数将其合并为一个option */

                assembleDataToOption() {
                    // 这部分的图例formatter取决于UI要求，如果你的项目中不需要，就可以不写formatter
                    // 由于echarts版本的迭代，这里的写法也有稍许改变
                    const formatter = (name) => {
                            const total = this.seriesData.reduce((acc, cur) => acc + cur.value, 0);
                            const data = this.seriesData.find((item) => item.name === name) || {};
                            const percent = data.value
                                    ? `${Math.round((data.value / total) * 100)}%`
                                    : "0%";

                            return `${name} ${percent}`;
                    };

                    return merge(
                            {},
                            basicOption,
                            { color: pieChartColor },
                            {
                                    legend: { formatter },
                                    series: [{ data: this.seriesData }],
                            },
                            this.extraOption
                    );
                },
                    /**
                     * 对chart元素尺寸进行监听，当发生变化时同步更新echart视图
                     */
                    addChartResizeListener() {
                            const instance = ResizeListener({
                                strategy: "scroll",
                                callOnAdd: true,
                            });

                            instance.listenTo(this.$el, () => {
                                if (!this.chart) return;
                                this.chart.resize();
                            });
                    },

                    /**
                     * 更新echart视图
                     */
                    updateChartView() {
                        if (!this.chart) return;
                        const fullOption = this.assembleDataToOption();
                        this.chart.setOption(fullOption, true);
                    },

                    /**
                     * 当窗口缩放时，echart动态调整自身大小
                     */
                    handleWindowResize() {
                        if (!this.chart) return;
                        this.chart.resize();
                    },
            }
  }
</script>

<style scoped="scoped" lang="scss">
    .chart {
        width: 100%;
        height: 100%;
    }
</style>

图表宽高自适应

这里直接设置为100%，使用期父元素的宽高，

这父元素可以直接使用我们封装的scss函数。

.chart {
    width: 100%;
    height: 100%;
 }

图表字体、间距等尺寸自适应

• echarts的字体大小只支持具体数值（像素），不能用百分比或者vw等尺寸，一般字体不会去做自适应，如果需要的话，这里可以对字体写一个自适应的处理函数

• 默认情况下，这里以你的设计稿是1920*1080为例，即网页宽度是1920px (做之前一定问清楚UI设计稿的尺寸）

• 我把这个函数写在一个单独的工具文件dataUtil.js里面，在需要的时候调用

• 其原理是计算出当前屏幕宽度和默认设计宽度的比值，将原始的尺寸乘以该值

• 另外，其它echarts的配置项，比如间距、定位、边距也可以用该函数

dataUtil.js

/* Echarts图表字体、间距自适应 */
export const fitChartSize = (size,defalteWidth = 1920) => {
  let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
  if (!clientWidth) return size;
  let scale = (clientWidth / defalteWidth);
  return Number((size*scale).toFixed(3));
}

我使用的是vue框架，可以将此函数挂载到原型上

import {fitChartSize} from '@src/utils/dataUtil.js'
Vue.prototype.fitChartFont = fitChartSize;

这样你可以在.vue文件中直接使用this.fitChartSize()调用

封装后的图表具体使用

<template>
   /** 饼图的父元素 **/
  <div class="echart-pie-wrap">
   <pie-chart :series-data="dataList" :extra-option="extraOption"></pie-chart>
  </div>
</template>

<script>
import PieChart from "@/components/Chart/PieChart/PieChart.vue"
export default {
  components: {
    PieChart,
  },
  data() {
    return {
      dataList: [
        {
          name: "西瓜",
          value: 20,
        },
        {
          name: "橘子",
          value: 13,
        },
        {
          name: "杨桃",
          value: 33,
        },
      ],
      extraOption: {
        color: ["#fe883a", "#2d90d1", "#f75981", "#90e2a9"],
            grid: {
                top: this.fitChartSize(30),
                right: this.fitChartSize(10),
                left: this.fitChartSize(20),
                bottom: this.fitChartSize(20) //间距自适应
            },
            textStyle: {
                color: "green",
                fontSize: this.fitChartSize(10) //字体自适应
            },
      },
    };
  },
};
</script>

<style lang="scss">
    .echart-pie-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: vw(300);
        height: vh(300);
        margin: 1vw auto;
    }
</style>

关于图表封装的源码说明

• 在源码中，我用到了lodash的一个公共函数merge,用它来合并图表的配置项。后续的来源对象属性会覆盖之前同名的属性

• 另外一个用到的函数isEmpty，当我传入的业务数据为空时，比如空数组[]、undefined、null时，都会被认为这是一个无数据的情况，这时候我们就展示一个空状态的组件，它可能由一张背景图构成；

• 在绑定到具体的DOM元素时，我没有用querySelector选择器去选择一个类或者是用Math.random生成的id，因为这两者都不是绝对可靠的，我直接使用当前vue示例关联的根DOM 元素$el

• 我监听窗口大小的变化，并为这种情况添加对应的事件处理函数--echarts自带的resize方法，使echarts图形不会变形

• 将对应DOM的宽高设为100%，让其大小完全由使用者提供的容器控制

• setOption方法的第二个参数表示传入的新option是否不与之前的旧option进行合并，默认居然是false，即合并。这显然不行，我们需要每次的业务配置都是完全独立的

• 命名非常语义化，一看就懂

• 保留了自己需要单独配置一些定制样式的灵活性，即extraOption

• 将图表字体自适应函数单独解耦，保持灵活性

defaultOption.js应该包括哪些内容?

• 正常情况下暴露一个基础配置basicOption就可以了

• 如果你需要处理字体和间距大小自适应，请在这里引入fitChartSize函数

import {fitChartSize} from "@src/utils/dataUtil.js"
export const basicOption = {
  title: {
      text: "某某手机数据",
      subtext: "来自xx公司",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
                textStyle: {
                    color: "RGB(254,66,7)",
                    fontSize: fitChartSize(10) //使用字体自适应
                },
    },
    series: [
      {
        name: "手机购买占比",
        type: "pie",
        radius: "50%",
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        data: [], // 这里在使用的时候会被业务数据替换
      },
    ],
}

element-resize-detector有何作用？

这是一个用于监听DOM元素尺寸变化的插件。我们已经对窗口缩放做了监听，但是有时候其父级容器的大小也会动态改变的。我们对父级容器的宽度进行监听，当父级容器的尺寸发生变化时，echart能调用自身的resize方法，保持视图正常。

当然，这个不适用于tab选项卡的情况，在tab选项卡中，父级容器从display:none到有实际的clientWidth，可能会比注册一个resizeDetector先完成，所以等开始监听父级容器resize的时候，可能为时已晚。

解决这个问题，最有效的方法还是在切换选项卡时手动去通过ref获取echart实例，并手动调用resize方法，这是最安全的，也是最有效的。

总结

以上就是项目适配的所有思路，可看到，我司采用的适配方案比较简单，原理上还是像素转为vw,vh。

这种方案虽说不是最完美的，但是很大程度上符合我们的业务需求。