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
Daily Recommendation