第一步 安装postcs和postcss-pxtorem
npm i postcss postcss-pxtorem@5.1.1 --save-dev
第二部 在项目的根目录下创建postcss.config.js文件,并写入下面的配置
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue:75,//根字号
propList: ["*"], //是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*']
},
},
};
第三步 引入rem.js
(function (doc, win) {
//获取html标签
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
//根据横竖屏和屏幕尺寸的改变来动态设置html根字号的函数
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.