Summary of multiple screen adaptation schemes for vue project

npm install vue2-scale-box

yarn add vue2-scale-box

<template>
    <div>
        <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">
            <router-view />
        </scale-box>
    </div>
</template>
 
<script>
import ScaleBox from "vue2-scale-box";
 
export default {
    components: { ScaleBox },
};
</script>
 
<style lang="scss">
body {
    margin: 0;
    padding: 0;
    background: url("@/assets/");
}
</style>

npm install vue3-scale-box

yarn add vue3-scale-box

<template>
    <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
        <router-view />
    </ScaleBox>
</template>
 
<script>
import ScaleBox from "vue3-scale-box";
</script>
 
<style lang="scss">
body {
    margin: 0;
    padding: 0;
    background: url("@/assets/");
}
</style>

class devicePixelRatio {
  /* Get system type */
  getSystem() {
    const agent = ();
    const isMac = /macintosh|mac os x/();
    if (isMac) return false;
    // Currently only for win processing, there is no such situation in other systems. If necessary, continue to add it here.    if (("windows") >= 0) return true;
  }
  /* Monitoring method compatible writing method */
  addHandler(element, type, handler) {
    if () {
      (type, handler, false);
    } else if () {
      ("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  }
  /* Correct browser zoom ratio */
  correct() {
    // After the page devicePixelRatio (device pixel ratio) changes, calculate the page body tag zoom to modify its size to offset the changes brought by devicePixelRatio    ("body")[0]. =
      1 / ;
  }
  /* Listen to page zoom */
  watch() {
    const that = this;
    // Note: This method is to solve the problem of two globally    (window, "resize", function () {
      (); // Recalibrate the browser zoom    });
  }
  /* Initialize page ratio */
  init() {
    const that = this;
    //Judge the device and only correct the browser zoom ratio under the win system    if (()) {
      (); // Correct browser zoom      (); // Listen to page zoom    }
  }
}
export default devicePixelRatio;

<template>
  <div>
    <router-view />
  </div>
</template>
 
<script>
import devPixelRatio from "@/utils/";
 
export default {
  created() {
    new devPixelRatio().init(); // Initialize the page proportion  },
};
</script>
 
<style lang="scss">
body {
  margin: 0;
  padding: 0;
}
</style>

export const monitorZoom = () => {
  let ratio = 0,
    screen = ,
    ua = ();
  if ( !== undefined) {
    ratio = ;
  } else if (~("msie")) {
    if ( && ) {
      ratio =  / ;
    }
  } else if (
     !== undefined &&
     !== undefined
  ) {
    ratio =  / ;
  }
  if (ratio) {
    ratio = (ratio * 100);
  }
  return ratio;
};

import { monitorZoom } from "@/utils/";
const m = monitorZoom();
if ( *  >= 3840) {
   = 100 / (Number(m) / 2); // When the screen is 4k} else {
   = 100 / Number(m);
}

import Vue from "vue";
import App from "./";
import router from "./router";
 
/* Adjust the scaling start */
import { monitorZoom } from "@/utils/";
const m = monitorZoom();
if ( *  >= 3840) {
   = 100 / (Number(m) / 2); // When the screen is 4k} else {
   = 100 / Number(m);
}
/* Adjust the scaling end */
 
 = false;
 
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

 * 

 * 

npm install postcss-px-to-viewport --save-dev

yarn add -D postcss-px-to-viewport

 = {
  plugins: {
    autoprefixer: {}, // Used to automatically add corresponding prefixes to different browsers, such as -webkit-, -moz-, etc.    "postcss-px-to-viewport": {
      unitToConvert: "px", // The unit that needs to be converted is "px" by default      viewportWidth: 390, // Width of UI design draft      unitPrecision: 6, // The conversion accuracy, that is, the number of decimal points      propList: ["*"], // Specify the units of the converted css attribute, *The units representing all css attributes are converted      viewportUnit: "vw", // Specify the window unit to be converted into, default vw      fontViewportUnit: "vw", // Specify the window unit to which the font needs to be converted, the default vw      selectorBlackList: ["wrap"], // The CSS selector that needs to be ignored will not be converted to viewport units, and the original px and other units are used      minPixelValue: 1, // The default value is 1, and no conversion is performed if it is less than or equal to 1px.      mediaQuery: false, // Whether to convert it in the css code for media query, default false      replace: true, // Whether to directly replace the attribute value without adding alternate attributes      exclude: [/node_modules/], // Ignore files or specific files in certain folders and use regular directory names to match, such as files under 'node_modules'      landscape: false, // Whether to handle horizontal screen situation      landscapeUnit: "vw", // The window unit used in horizontal screen, default vw      landscapeWidth: 2048 // Viewport width used when screening horizontally    }
  }
};