前端大屏开发3种主流适配方案总结

假设设计稿尺寸为 1920*1080（做之前一定问清楚 ui 设计稿的尺寸）
即： 网页宽度=1920px 网页高度=1080px 
网页宽度=100vw 网页宽度=100vh 
所以，在 1920px*1080px 的屏幕分辨率下 1920px = 100vw 1080px = 100vh

这样一来，以一个宽 300px 和 200px 的 div 来说，其所占的宽高，以 vw 和 vh 为单位，计算方式如下:

vwDiv = (300px / 1920px) * 100vw
vhDiv = (200px / 1080px) * 100vh

所以，就在 1920*1080 的屏幕分辨率下，计算出了单个 div 的宽高 
当屏幕放大或者缩小时，div 还是以 vw 和 vh 作为宽高的，就会自动适应不同分辨率的屏幕

// 使用 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;
}

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.scs，详细配置参考 vue-cli 官网
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/utils.scss";`,
      },
    },
  },
};

<template>
    <div class="box">			
    </div>
</template>

<script>
export default{
    name: "Box",
}
</script>

<style lang="scss" scoped="scoped">
/* 
 直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh 单位		 
 */
.box{
    width: vw(300);
    height: vh(100);
    font-size: vh(16);
    background-color: black;
    margin-left: vw(10);
    margin-top: vh(10);
    border: vh(2) solid red;
}
</style>

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

// px转vw
export const px2vw = (_px) => {
    return (_px * 100) / designWidth + 'vw'
}
export const px2vh = (_px) => { return (_px * 100.0) / designHeight + 'vh'; }; 
export const px2font = (_px) => { return (_px * 100.0) / designWidth + 'vw'; };

// directive.js
import * as ECharts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
import Vue from "vue";
const HANDLER = "_vue_resize_handler";
function bind(el, binding) {
  el[HANDLER] = binding.value
    ? binding.value
    : () => {
        let chart = ECharts.getInstanceByDom(el);
        if (!chart) {
          return;
        }
        chart.resize();
      };
  // 监听绑定的div大小变化，更新 echarts 大小
  elementResizeDetectorMaker().listenTo(el, el[HANDLER]);
}
function unbind(el) {
  // window.removeEventListener("resize", el[HANDLER]);
  elementResizeDetectorMaker().removeListener(el, el[HANDLER]);
  delete el[HANDLER];
}
// 自定义指令：v-chart-resize 示例：v-chart-resize="fn"
Vue.directive("chart-resize", { bind, unbind });

<div className="screen-wrapper">
    <div className="screen" id="screen">
    </div>
 </div>

<script>
export default {
    mounted() {
        // 初始化自适应 --在刚显示时候开始适配一次
        handleScreenAuto();
        // 绑定自适应函数 ---防止浏览器栏变化后不再适配
        window.onresize = () => handleScreenAuto();
    },
    destroyed() {
        window.onresize = null;
    },
    methods: {
        handleScreenAuto() {
            const designDraftWidth = 1920; //设计稿的宽度 
            const designDraftHeight = 960; //设计稿的高度
            // 根据屏幕的变化适配的比例
            const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftWidth ? 
            document.documentElement.clientWidth / designDraftWidth : 
            document.documentElement.clientHeight / designDraftHeight;
            // 缩放比例
            document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%, -50%)`;
        }
    }
}
</script>

/*
  除了设计稿的宽高是根据您自己的设计稿决定以外，其他复制粘贴就完事
*/  
.screen-root {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;  //设计稿的宽度
        height: 960px;  //设计稿的高度
        transform-origin: 0 0;
        position: absolute;
        left: 50%;
        top: 50%;
    }
}

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-rem": {
      unitToConvert: 'px', // (String) 要转换的单位，默认是 px。
      widthOfDesignLayout: 1920, // (Number) 设计布局的宽度。对于pc仪表盘，一般是 1920.
      unitPrecision: 3, // (Number) 允许 rem 单位增长到的十进制数字.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) 要忽略并保留为 px 的选择器.
      minPixelValue: 1, // (Number) 设置要替换的最小像素值.
      mediaQuery: false // (Boolean) 允许在媒体查询中转换 px.
    }
  }
}

(function init(screenRatioByDesign = 16 / 9) {
    let docEle = document.documentElement
    function setHtmlFonstSize() {
        var screenRatio = docEle.clientWidth / docEle.clientHeight;
        var fontSize = (
            screenRatio > screenRatioByDesign ? (screenRatioByDesign / screenRatio) : 1
        ) * docEle.clientWidth / 10;
        docEle.style.fontSize = fontSize.toFixed(3) + "px";
        console.log(docEle.style.fonSize);
    }
    setHtmlFontSize()
    window.addEventListener('resize', setHtmlFontSize)
})

import './utils/rem.js';