Vue-cli How to convert px into rem to adapt to mobile terminal

vue-cli2 version configuration

1. Download lib-flexible

I'm using vue-cli+webpack, so it is installed through npm

npm i lib-flexible --save

2. Introduce lib-flexible

Introduce lib-flexible in

import 'lib-flexible/flexible'

3. Set meta tags

Set the device width and scaling ratio through meta tags

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. Install px2rem-loader

npm install px2rem-loader --save-dev

5. Configure px2rem-loader

here it isimportantOne step ~~

Found in the build file,Willpx2rem-loaderAdd tocssLoadersIn, such as:

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: .NODE_ENV === 'production',
      sourceMap: 
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

At the same time,generateLoadersAdd to the methodpx2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
      ({
        loader: loader + '-loader',
        options: ({}, loaderOptions, {
          sourceMap: 
        })
      })
    }

6. Restart, everything is OK~

After the configuration is complete, you only need to restart the service and it will automatically be converted to rem

npm run dev

2. Usage in Vue-cli3

Regarding mobile adaptation, I like to use px2rem to match lib-flexible, which is very convenient. After vue-cli3.0, the project configuration has been greatly simplified, which makes the original px2rem no longer exist, but in fact, as long as you master the correct posture, the configuration method is simpler than before.

1、lib-flexible

Function: Let the web page adapt to mobile devices of different sizes based on the device dpr and width, using the font-size of the viewport and html root element with rem.

npm i lib-flexible --save

Introduced:

Entry filemiddle:

import 'lib-flexible/'

2、pxtorem

Function: convert the px of the css in the project into a rem unit to avoid the trouble of calculation

npm i postcss-px2rem --save

Configuration:(If not, create one manually) inside,postcssAdded in:

 = {
  css: {
      loaderOptions: {
          css: {
              // options here will be passed to css-loader
          },
          postcss: {
              // options here will be passed to postcss-loader
              plugins: [require('postcss-px2rem')({
                  remUnit: 37.5
              })]
          }
      }
  }
}

TIPS
1. In pxtorem, write px that you want to ignore in capitalization, such as border:1PX solid #fff;
2. You can also choose postcss-px2rem. I prefer the ignorance method of pxtorem, which facilitates my vscode beautify automatic formatting code

This is the article about Vue-cli converting px into rem to mobile terminals. For more related Vue-cli converting px into rem, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!