vue + vant 移动端适配

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. 重启项目即可。

标签：vue,const,vant,适配,clientWidth,doc,fontSize,win,postcss
来源： https://www.cnblogs.com/yseraaa/p/15438392.html