PC-side large screen adaptive in vue-cli3

Preliminary preparation:

vue-cli3 脚手架
flexible   插件 自适应插件
px2rem-loader  插件 将px转化为rem
postcss-loader postcss

Step 1: Install the plugin

npm i lib-flexible -S

npm i px2rem-loader -D

npm install --save-dev postcss-loader postcss

Step 2: After installation, introduce lib-flexible in main.js

import 'lib-flexible'

Step 3: Add configuration in vue.config.js

module.exports = {
    
    
  chainWebpack: config => {
    
    
    config.module
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .resourceQuery(/\?vue/)
      .use("px2rem")
      .loader("px2rem-loader")
      .options({
    
    
        remUnit: 192
      });
  }
}

Step 4: Set the width of flexible.js to automatically adapt to the screen size, modify the flexible.js file, (search for flexible.js globally)

Modified code:

 function refreshRem(){
    
    
   var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
    
    
        width = width * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

Step 5: Restart the project after setting up and check the effect

Test code

<template>
  <div class="bg">
    <div class="header">
      大屏展示
    </div>
    <div class="body">
        <div class="box-full">
          占满全行
        </div>
        <div class="box-half">
          占行一半
        </div>
    </div>
  </div>
</template>

<script>
export default {
    
    
  name: "test",
  data() {
    
    
    return {
    
    
      name: `test`
    }
  },
  mounted() {
    
    
  },
  methods: {
    
    }
}
</script>

<style scoped>
  .bg{
    
    
    height: 100vh;
    width: 100vw;
    background: #efefef;
    /*overflow: hidden;*/
  }
  .header{
    
    
    height: 150px;
    text-align: center;
    font-size: 50px;
    line-height: 150px;
  }
  .body{
    
    
    height: calc(100% - 150px);
  }
  .body div{
    
    
    line-height: 150px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
  .box-full {
    
    
    width: 1920px;
    height: 150px;
    background: red;
  }
  .box-half{
    
    
    width: 920px;
    height: 150px;
    background: green;
  }
</style>

Extension reference:
https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html