Vue3.0 adaptive operation of computers with different resolutions

First we need to install some dependencies

npm i lib-flexible-computer -S //The root node will change according to the page viewport font-size size npm i px2rem-loader -D //Automatically convert px to rem
npm i postcss-px2rem // A plugin that automatically converts px in the code into the corresponding rem

What I want to tell you here is the dependency of lib-flexible-computer installed by npm. I believe that everyone has searched for many methods to adapt to PC. Most of them installed the following dependency

npm i lib-flexible -S

Install this dependency. If you do the adaptation, it can only be used for screens below 540. It is not very useful on the PC side, so I changed it to the dependency written above. Without further ado, let's get to the point. How to use it after installing the dependency

Import in main.js

import "lib-flexible-computer";

Then create a vue.config.js file at the same level as src and add the following code to it

module.exports = {
 publicPath: "./",
 outputDir: "dist",
 lintOnSave: true,
 css: {
  loaderOptions: {
   css: {},
   postcss: {
    plugins: [
     require("postcss-px2rem")({
      remUnit: 192///Design width/10
     })
    ]
   }
  }
 }
};

In this way, the code generated by computers with different resolutions will be automatically converted into rem
Note:**

The size of the design has been set above. After these operations are completed, you can write the size of the design as you like, and it will be automatically converted.

**

This is the end of this article about vue3.0 adapting to computers with different resolutions. For more relevant vue3.0 adaptive resolution computer content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!