vue 移动端 rem适配 (使用postcss-pxtorem)

书写meta标签

<--index.html-->

1. 禁止缩放（把下方meta标签写到html的head标签中）
2. viewport 就是设备的屏幕上能用来显示我们的网页的那一块区域（视觉视口）。
3. width=device-width 让css宽度等于设备宽度
4. initial-scale=1 初始化缩放比例为1
5. maximum-scale=1 最大缩放比例为1
6. minimum-scale=1 最小缩放比例为1
7. user-scalable=no 禁止用户缩放

重置根元素字体大小（font-size）

<--index.html-->
window.onload = function () { //当页面加载完成时
    const baseSize = 75; // 这个是设计稿中1rem的大小。
    function setRem() {
        // 实际设备页面宽度和设计稿的比值
        const scale = document.documentElement.clientWidth / 750;
            // 计算实际的rem值并赋予给html的font-size
        document.documentElement.style.fontSize = (baseSize * scale) + 'px';
    }
    setRem();
    window.addEventListener('resize', () => {
        setRem();
    });

    document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();  //阻止元素的默认行为
        }
    })
    var lastTouchEnd = 0;
    document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;  //当前为最后一次触摸
    }, false)
}

配置postcss-pxtorem（正常的项目）

1. 下载postcss-pxtorem npm install postcss-pxtorem --save-dev
2. 配置 <--postcss.config.js (在项目根目录，跟package.json同级)

<--postcss.config.js (在项目根目录，跟package.json同级)-->
module.exports = {
   plugins: {
     autoprefixer: {
       browsers: ['Android >= 4.0', 'iOS >= 8'],
     },
     'postcss-pxtorem': {
       rootValue: 37.5, // 换算的基数
       propList: ['*'],
     },
   },
 };

3. 让对应的ui组件库也能够用上rem (这里以vant为例)

<--vue.config.js-->
 module.exports = {
    transpileDependencies: ['vant'],  //编译依赖
 }

配置postcss-pxtorem（当项目被其他目录嵌套，node_modules在最外层目录时）

<--vue.config.js-->
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5, // 换算的基数
                        propList: ['*'],
                    }),
                ]
            }
        }
    },
}

vant rem介绍

postcss-pxtorem githb地址