How to use rem adaptation in Vue

1. Development environment vue
2. Computer system Windows 10 Professional Edition
3. In the process of using Vue to develop mobile terminals, we will have headaches because of compatibility. Let me share with you how to use rem self-adaptation in Vue. I hope it will be helpful to you.
4. Without further ado, let's get straight to the point:

//Install postcss-pxtorem
npm i postcss-pxtorem -S

5. Create a new rem folder in the src directory, create a new rem.js, and add the following code:

//Base size const baseSize = 37.5
// Set rem function function setRem() {
 const salepro = document.documentElement.clientWidth / 750
 // The current page width is relative to the 750 width. You can modify it according to your needs.
 // Set the font size of the root node of the page document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'
}
// Initialize setRem()
// Reset rem when changing window size
window.onresize = function () {
 setRem()
}

6. Create a new .postcssrc.js in the project root directory and add the following code:

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

Note: In my configuration, the ratio is 1:1, that is, the width of the design drawing is 750px. You can just write width:750px; in the CSS, no conversion is required, isn’t it great?

7. Import in main.js

import '@/rem/rem.js'

8. Use it in the vue template and add the following code to css:

<style lang="scss" scoped>
.about {
 width: 750px;
 height: 100vh;
 box-sizing: border-box;
 background-color: blue !important;
 .kk {
  width: 350px;
  height: 350px;
  background-color: red;
 }
}
</style>

9. The effect diagram is as follows:

10. This is the end of this sharing. I hope it will be helpful to you. Let us work together to reach the top.

The above is the details of how Vue uses rem adaptation. For more information about Vue using rem adaptation, please pay attention to other related articles on 123WORDPRESS.COM!