1. 设置动态根字号大小,/public/phone-adapt.js,在index.html中引入
(function (doc, win) { const docEl = win.document.documentElement; const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; const resizeRem = function () { const clientWidth = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth; if (!clientWidth) return; const width = clientWidth; const fontSize = 20 * width / 375; // 设置根字号为20px docEl.style.fontSize = fontSize + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, resizeRem, false); resizeRem(); })(document, window);
2. 安装postcss-pxtorem,将vant里面的px转成rem
npm install postcss-pxtorem --save-dev
3. 配置postcss.config.js,如果没有这个文件就新建一个
module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 20, // vant-UI的官方根字体大小是37.5 propList: ['*'] } } }
4. 重启项目即可。