[JavaScript知识库]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中添加如下代码：

<script>
    /(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
</script>

二、移动端适配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,
        },
    },
};

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读