該功能基于vue-cli3；cli2的方法大差不差
準(zhǔn)備工作：
1寒跳、postcss-px2rem-exclude（推薦） || postcss-px2rem（不推薦）固逗；
2、rem.js
第一步：
npm install postcss-px2rem-exclude --save
//找到：postcss.config.js
//在plugins新增
'postcss-px2rem-exclude': {
remUnit: 37.5,//結(jié)果為：設(shè)計稿元素尺寸/16皮胡，比如元素寬320px,最終頁面會換算成 20rem
exclude: /node_modules|folder_name/i //屏蔽node_modules里的css，使用postcss-px2rem不能屏蔽赏迟，所以會導(dǎo)致引入的一些ui變形
}
第二步：
新建rem.js
// 設(shè)置 rem 函數(shù)
function setRem() {
// 320 默認(rèn)大小16px; 320px = 20rem ;每個元素px基礎(chǔ)上/16
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(htmlWidth)
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
if (htmlWidth >= 450) {
//設(shè)置根元素字體大小
htmlDom.style.fontSize = 22 + 'px';
} else {
//設(shè)置根元素字體大小
htmlDom.style.fontSize = htmlWidth / 20 + 'px';
}
}
// 初始化
setRem();
// 改變窗口大小時重新設(shè)置 rem
window.onresize = function() {
setRem()
}
根據(jù)窗口大小動態(tài)設(shè)置根元素的size屡贺；
以上兩步就可以實現(xiàn)小程序中rpx功能，針對設(shè)計稿為750px的移動端锌杀。
