1. Create a rem.js first file, which is incorporated main.js file, specific configuration is as follows
32 baseSize = const
// function provided rem
function setRem () {
// current page width to wide scale 750, may be modified according to their needs.
Scale document.documentElement.clientWidth = const / 750
// set the root page font size
document.documentElement.style.fontSize = (* baseSize Math.min (Scale, 2)) + 'PX'}
// initialize
setRem ()
/ re-setting / changing the window size REM
window.onresize = function () {
setRem ()
}
2. Download postcss-pxtorem (npm install postcss- pxtorem --save), the specific configuration is as follows
modifications .postcssrc.js file, add items disposed inside
"postcss-pxtorem": {
"rootValue": 32,
"propList": [ "*"]
}
this will automatically help you px into rem, to facilitate that, if you want to write directly rem units in the project, you can write as follows index.html inside: fnResize ()
window.onresize = function () {
fnResize ()
}
function fnResize () {
var deviceWidth document.documentElement.clientWidth = || window.innerWidth
IF (deviceWidth> = 750) {
deviceWidth = 750
}
IF (deviceWidth <= 320.) {
deviceWidth = 320.
}
document.documentElement .style.fontSize = (deviceWidth / 7.5) + 'px'}
this configuration which defines the 100px = 1rem, can be used directly in the project rem units, can themselves to count
Reproduced in: https: //juejin.im/post/5cf729c15188257480599434