Example code for adaptive screen size of vue development page

Vue development page adaptive screen size

1. Overview

Pages developed using vue are all set their size through px. If you change to a screen of different sizes, the page layout will be incomplete and the display will be incomplete. The following is to replace the px installation with rem units through plug-ins to adapt to screens of different sizes.

2. Web pages adapt to screen size

2.1. Install the plug-in

The function of the lib-flexible plug-in is to adjust the page width and height according to the rem and adapt to the screen size.
The function of the px2rem-loader plug-in is to convert px units into rem units, and the lib-flexible plug-in can adjust the width and height dimensions of the web page according to rem.

# Install lib-flexible pluginyarn add lib-flexible
# Install px2rem-loader plug-in -D Install to the development environmentyarn add -D px2rem-loader

2.2.Configure plug-in

1. Reference lib-flexible plugin in file

import Vue from "vue"
import App from "./"
import router from "./router"
import store from "./store"
import "@/assets/scss/"
import axios from "axios"
// UI
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/"

// tools
// Quote lib-flexible pluginimport "lib-flexible"

2. Configure px2rem-loader in

 = {
  configureWebpack: {
    // webpack configuration    output: {
      filename: ,
      chunkFilename: `,
    },
  },
  // Configure px2rem-loader  chainWebpack: config => {
    
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .resourceQuery(/\?vue/)
      .use("px2rem")
      .loader("px2rem-loader")
      .options({
      // Set the px conversion to rem ratio, the design draft size is 1920, the proportion is 1920/10        remUnit: 192
      });
  },
}

3. Modify

Global search, replace the original 540 in the refreshRem function with width, so that the width can be automatically adapted according to the screen size.
Or find the file in the following path: node_modules/lib-flexible/

function refreshRem(){
        var width = ().width;
        if (width / dpr > 540) {
        	// Change width = 540 * dpr; 540 to width            width = width * dpr;
        }
        var rem = width / 10;
         = rem + 'px';
         =  = rem;
    }

Restart the service and change the browser size of the web page content can change with the page size.

This is the article about the adaptive screen size of the vue development page. For more related contents of the adaptive screen of the vue page, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!