Project construction : be based on vue-cli3 structure , use postcss-px2rem px2rem-loader conduct rem Adaptation
Implementation principle : Every pack ,webpack By using plug-ins postcss-px2rem, Help us automatically px Unit converted to rem Company

There is a pit ahead :UI Use of some components in the framework JavaScript take css Write as inline style directly in html In label , The relevant data is not read when the adaptation is packaged css, So we need to configure the relevant styles , stay style In need of "
!important " Make style overlay .
————————————————
1 install postcss-px2rem and px2rem-loader
npm install postcss-px2rem px2rem-loader --save
2 In the root directory src New in util New under directory rem.js Proportional adaptation file
// rem Proportional adaptation profile // Base size const baseSize = 16 // set up rem function function setRem () {
// Current page width relative to 1920 Wide scale , It can be modified according to your own needs . const scale = document.documentElement.
clientWidth/ 1920 // Set the font size of the page root node (“Math.min(scale, 2)” The maximum magnification is 2, It can be adjusted according to the actual business needs )
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' }
// initialization setRem() // Reset when changing window size rem window.onresize = function () { setRem() }
3 stay main.js Introducing an adaptation file into the
import ‘./util/rem’
4 reach vue.config.js Configure plug-ins in
// Introduction of proportional adapter plug-in const px2rem = require('postcss-px2rem') // Configure base size const postcss =
px2rem({ // Base size baseSize, Needs and needs rem.js Same in remUnit: 16 }) // Using the proportional adapter plug-in module.exports
= { lintOnSave: true, css: { loaderOptions: { postcss: { plugins: [ postcss ] }
} } }

Technology
©2019-2020 Toolsou All rights reserved,
Final review of database : Summary of comprehensive application questions use Python Make simple games Laplance operator ( Second derivative ) Convert hard disk to GPT Partition format Python Implementation of Hanoi Tower code about String How to create objects vue3 Learning journey 1—— establish vue3 project java String from back to front _Java String String summary use Python Write a story about plants versus zombies 【 Greedy Algorithm 】 Huffman coding problem