Detailed explanation of Vue px to rem configuration

Method 1

1. Configuration and installation steps:

Method 2

Method 3

Summarize

Method 1

1. Configuration and installation steps:

1. Create a config folder under the src folder of the Vue project:

2. Create rem.js in the config folder:

insert image description here

3. Copy the following code into rem.js:

// Base size const baseSize = 32
// Set rem function function setRem () {
  // The scaling ratio of the current page width relative to 750 width, which can be modified according to your needs.
  const scale = document.documentElement.clientWidth / 750
  // Set the font size of the root node of the page document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// Initialize setRem()
// Reset rem when changing window size
window.onresize = function () {
  setRem()
}

4. Introduce in main.js under the src folder:

import './config/rem'

5. Import into the root directory of the Vue project:

npm install postcss-pxtorem -D

6. Add to postcss.config.js in the Vue project folder:

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue": 16,
      "propList": ["*"]
    }
  }
}

Method 2

The first step is to install lib-flexible

npm i lib-flexible --save

Step 2: Install px2rem-loader

npm install px2rem-loader --save-dev

The third step is to introduce lib-flexible

import 'lib-flexible/flexible'

The fourth and most important step is to configure the utils file

const px2remLoader = {
    loader: 'px2rem-loader',
    options:
      remUnit: 37.5
    }
  }<br>//Add px2remLoader in the generateLoaders method
1
const loaders = [cssLoader,px2remLoader]

Or step 4: Create new “vue.config.js” file if without “vue.config.js " (directory: hello-world/vue.config.js )

module.exports = {
     chainWebpack: (config) => {
         config.module
         .rule('css')
         .test(/\.css$/)
         .oneOf('vue')
         .resourceQuery(/\?vue/)
         .use('px2rem')
         .loader('px2rem-loader')
         .options({
             remUnit: 75 // 75 means the design draft of 750, 37.5 means the design draft of 375})
     }
 }

1. Writing in px will be converted into rem format, but there are some places where we don’t want to convert. We can use the following two methods.

Adding /no/ after px will not convert px and will output it as is. — Generally, border needs to add /px/ after px, and three sets of codes will be generated according to the different dpr. ---- This is required for general fonts

2 During use, it is found that some import external styles will not be converted. Be careful to avoid these pitfalls.

<style src='../assets/style.css'>
 /* px2rem can convert normally*/
</style>

<style>
  /* px2rem cannot convert normally */
  @import '../assets/style.css';
</style>

<style>
  /* px2rem cannot convert normally */
  @import url('../assets/style.css');

</style>

Method 3

The first step is to install amfe-flexible

npm i amfe-flexible -S

The second step is to install postcss-pxtorem

npm install postcss-pxtorem --save-dev

The third step is to introduce amfe-flexible

import 'amfe-flexible'

Step 4 Create the postcss.config.js file in the root directory

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Example of using rem to replace px in vue project
About the issue of vue using postcss-pxtorem for mobile adaptation
Specific method of using postcss-pxtorem in vue3.0
Detailed explanation of the problems encountered when using px2rem in Vue-cli3.X
Adaptation px2rem sample code in vue
How to automatically convert px to rem in Vue project

<<: Linux RabbitMQ cluster construction process diagram

>>: MySQL spatial data storage and functions