Detailed explanation of the example using px2rem method for Vue project

Article preface

The design draft gives px, but it needs to be adapted. It is a cliché. Use flex layout + rem + to set the root node font-size size in proportion to achieve it. The most troublesome thing here is to rewrite px to rem. The manual modification is too repetitive. Fortunately, you can use the webpack plugin to help us automatically convert it during the packaging process.

How to use

1. Install the package

npm i postcss-px2rem

2. Write configuration files

Write the core code, name it casually, I name it here px2rem and put it in the src/utils folder

//Basic sizeconst baseSize = 100
// Set the rem functionfunction setRem() {
  // The current page width is scaled by 1920 width, which can be modified according to your needs.  const scale =  / 1920
  // Set the font size of the page root node   = baseSize * (scale, 2) + 'px'
}
// InitializationsetRem()
// Reset rem when changing the window size = function() {
  setRem()
}

Introduce the file just now

import "./utils/px2rem"

Introduce the px2rem package and enable the postcss plugin in css plugins

const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 100   //Base size baseSize, needs to be the same as in})
 = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

Tips

Inline style px will not be converted to rem

If you want to change the style of the UI library, you need to use rem in the style unit.

If you don't want to convert to rem, write px to PX

The above is the detailed explanation of the example of using px2rem for Vue project. For more information about using px2rem, please follow my other related articles!