Summary of 3 mainstream adaptation solutions for front-end large screen development

Assume that the design draft size is 1920*1080（Be sure to ask clearly before doing it ui Size of design draft）
Right now： Web page width=1920px Web page height=1080px 
Web page width=100vw Web page width=100vh 
so，exist 1920px*1080px at screen resolution 1920px = 100vw 1080px = 100vh

This way，With one width 300px and 200px of div Say，其所占of宽高，by vw and vh For units，The calculation method is as follows:

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

so，就exist 1920*1080 at screen resolution，Calculated a single div of宽高 
When the screen is enlarged or reduced，div 还是by vw and vh 作为宽高of，就会自动适应不同分辨率of屏幕

// Use scss' math function, /documentation/breaking-changes/slash-div@use "sass:math";

// Default design draft width$designWidth: 1920;
// The height of the default design draft$designHeight: 1080;

// Function converted to vw@function vw($px) {
  @return ($px, $designWidth) * 100vw;
}

// Function converted to vh@function vh($px) {
  @return ($px, $designHeight) * 100vh;
}

const path = require("path");

function resolve(dir) {
  return (__dirname, dir);
}

 = {
  publicPath: "",
  configureWebpack: {
    name: "app name",
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },
  css: {
    // Global configuration, detailed configuration reference vue-cli official website    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/";`,
      },
    },
  },
};

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

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

<style lang="scss" scoped="scoped">
/*
  Directly use the vw and vh functions to pass the pixel value in, and the specific vw vh unit is obtained
  */
.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>

// Define the width and height of the design draftconst designWidth = 1920
const designHeight = 1080

// px to vwexport 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'; };

// 
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] = 
    ? 
    : () => {
        let chart = (el);
        if (!chart) {
          return;
        }
        ();
      };
  // Listen to the binding div size changes, update the echarts size  elementResizeDetectorMaker().listenTo(el, el[HANDLER]);
}
function unbind(el) {
  // ("resize", el[HANDLER]);
  elementResizeDetectorMaker().removeListener(el, el[HANDLER]);
  delete el[HANDLER];
}
// Custom directive: v-chart-resize Example: v-chart-resize="fn"("chart-resize", { bind, unbind });

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

<script>
export default {
    mounted() {
        // Initialize adaptation -- start adapting once when it is just displayed        handleScreenAuto();
        // Bind adaptive function --- to prevent the browser bar from being adapted after it changes         = () => handleScreenAuto();
    },
    destroyed() {
         = null;
    },
    methods: {
        handleScreenAuto() {
            const designDraftWidth = 1920; //Width of the design draft            const designDraftHeight = 960; //The height of the design draft            // The proportions adapted according to the changes in the screen            const scale =  /  < designDraftWidth / designDraftWidth ? 
             / designDraftWidth : 
             / designDraftHeight;
            // Scaling            ('#screen'). = `scale(${scale}) translate(-50%, -50%)`;
        }
    }
}
</script>

/*
   In addition to the width and height of the design draft are determined based on your own design draft, copy and paste the other ones.
 */  
.screen-root {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;  //Width of the design draft        height: 960px;  //The height of the design draft        transform-origin: 0 0;
        position: absolute;
        left: 50%;
        top: 50%;
    }
}

 = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-rem": {
      unitToConvert: 'px', // (String) The unit to be converted is px by default.      widthOfDesignLayout: 1920, // (Number) The width of the design layout.  For PC dashboards, it is generally 1920.      unitPrecision: 3, // (Number) Decimal number that allows rem units to grow.      selectorBlackList: ['.ignore', '.hairlines'], // (Array) Selector to ignore and keep as px.      minPixelValue: 1, // (Number) Sets the minimum pixel value to replace.      mediaQuery: false // (Boolean) allows converting px in media queries.    }
  }
}

(function init(screenRatioByDesign = 16 / 9) {
    let docEle = 
    function setHtmlFonstSize() {
        var screenRatio =  / ;
        var fontSize = (
            screenRatio > screenRatioByDesign ? (screenRatioByDesign / screenRatio) : 1
        ) *  / 10;
         = (3) + "px";
        ();
    }
    setHtmlFontSize()
    ('resize', setHtmlFontSize)
})

import './utils/';