Px2rem loader converts PX into REM and adapts to mobile vant UI and other frameworks

A brief description

Recently, I tried several mobile terminals ui frame , Find out vant-ui Not bad ;
But there's a problem , Namely vant-ui The unit is px, We need to convert it into rem;

Specific implementation method

1. download lib-flexible

It uses vue-cli+webpack, adopt npm To install

npm i lib-flexible --save

2. introduce lib-flexible

stay main.js Introduction in lib-flexible

import 'lib-flexible/flexible'

3. Set up meta label

adopt meta label , Set the device width and scaling

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

4. install px2rem-loader

npm install px2rem-loader

5. To configure px2rem-loader

This is an important step ~~
stay build Found in file util.js, take px2rem-loader Add to cssLoaders in , Such as ：

const px2remLoader = {
    
    loader: 'px2rem-loader',
    options: {
    
      remUnit: 75 //  Set up here html Root font ,vant-UI The official root font size of is 37.5
    }
}

meanwhile , stay generateLoaders Method to add px2remLoader

function generateLoaders (loader, loaderOptions) {
    
      const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
     ...
     ...
     ...
}

6. After configuration , Just restart the service , It is automatically converted to rem 了

npm run dev

After reboot , Viewing the units in the browser has become rem 了 ;