Vue-移动端适配rem、vw、vh

一、移动端适配rem

1、安装lib-flexible

npm i lib-flexible --save

2、在main.js引入lib-flexible

// main.js
import 'lib-flexible/flexible'

3、安装postcss和postcss-pxtorem

npm install postcss postcss-pxtorem --save-dev

4、配置postcss-pxtorem

        在根目录下的.postcssrc.js文件中修改为以下示例，若没有该文件则手动添加：

// .postcssrc.js
module.exports = {
    plugins: {
        "autoprefixer": {},
        "postcss-pxtorem": {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

5、其他设计稿尺寸

        如果设计稿的尺寸不是 375，而是 750 或其他大小：

module.exports = {
    plugins: {
        "autoprefixer": {},
        "postcss-pxtorem": { 
            rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            propList: ['*']
        }
    }
}

6、postcss-pxtorem参数说明

module.exports = {
    plugins: {
        "autoprefixer": {},
        "postcss-pxtorem": {
            rootValue: 100,  // 换算基数，默认100，规定根节点的font-size为1rem=100px,在设计稿上量出多少px直接在代码中写多少px
            unitPrecision: 5,  // 保留rem小数点多少位
            propList: ['*', '!border', '!font-size'],  // 存储将被转换的属性列表，'!font-size' 即不对字体进行rem转换
            selectorBlackList: ['.radius'],  // 要忽略并保留为px的选择器，例如fs-xl类名，里面有关px的样式将不被转换，支持正则写法
            replace: true,
            mediaQuery: false,  // 媒体查询( @media screen 之类的)中不生效
            minPixelValue: 12,  // 设置要替换的最小像素值，px小于12的不会被转换
            propWhiteList: [],  // 默认值是一个空数组，标识禁用白名单并启用所有属性
            propBlackList: ['font-size'], // 黑名单
        }
    }
}

7、针对ipad 和 ipad pro 设备无效

        在index.html中添加如下代码：

二、移动端适配vw、vh

1、安装postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev

2、配置postcss-px-to-viewport

        在根目录下的.postcssrc.js文件中修改为以下示例，若没有该文件则手动添加：

// .postcssrc.js
module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            viewportWidth: 375,
        },
    },
};