Implementation method of Vue large screen adaptive (can be used in cv)

Preface

The first time I came into contact with the large screen, the leader gave the task to adapt to the large screen, and then I targeted Baidu hhhhh. I read many versions differently, so I summarized a tutorial for nurses, step-by-step teaching, and can be used directly with CV. This method can also be used for mobile adaptation. You only need to change the size of the file to the design draft size of the mobile terminal/10. I have not practiced the mobile terminal before. If you need it, you can try it. If nothing unexpected happens, it will be fine.

Large screen

Step 1: Get off the package first, use lib-flexible and postcss-pxtorem

If you download postcss-pxtorem directly, you will get an error, so here we download the specified version [email protected]

npm download

npm install lib-flexible --save-dev

postcss-pxtorem: Automatically convert px to rmm

npm install [email protected] --save-dev

yarn Download

yarn add lib-flexible

yarn add [email protected]

Step 2: Introduce

import 'lib-flexible'

Step 3: Modify the lib-flexible source file configuration

Modify node_modules in lib-flexible, find the refreshRem function to modify:

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

Note: Here you only need to modify the maximum and minimum screen width (540 and 1980)

Step 4: Configure it in

 = {
css: {
    sourceMap: false,
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },
      postcss: {
        // options here will be passed to postcss-loader
      },
    },
  },
 }

Step 5: Create a new one at the same level

 = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 192,
      propList: ['*'],
    },
  },
}

Note: The rootValue here can be based on the size of the design draft /10

Finally, npm run dev or yarn dev is OK

However, be aware that if the node_modules dependency is deleted, the configuration file needs to be modified after re-downloading

Summarize

This is the end of this article about the implementation of Vue large-screen adaptive. For more related content on Vue large-screen adaptive, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!