在vue移动端项目开发中，按照UI设计图尺寸开发并且需要进行各屏幕的适配时，我们单独使用rem,vm,vh时极度不方便，所以笔者经过探索，调试，参考。总结出两种统一适配的方式:1.px转rem进行屏幕适配；2.px转viewport(vm,vh)进行屏幕适配

  • px转rem进行屏幕适配

1.首先需要在vue工程中进行安装(安装之后，运行程序时可能会出现报错，笔者遇到的是版本问题，所以就安装了指定的版本)

lib-flexible主要用于屏幕适配，而postcss-pxtorem主要用于单位转换(即将px转为rem);

lib-flexible是淘宝项目组开发出来的一个小插件，属于开源项目,它会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px;

postcss-pxtorem则是PostCss(一款使用插件去转换CSS的工具)中的一个插件。

npm install lib-flexible@0.3.2 postcss-pxtorem@5.1.1 --save-dev

 2.安装完成之后，在vue-cli工程中进行使用

lib-flexible的使用比较简单

//    main.js引用即可 

import Vue from 'vue'
import App from './App.vue'

import 'lib-flexible' //直接引用
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

postcss-pxtorem有两种引用方式  

/*
*    第一种引用方式
*    在vue.config.js文件中引用
*/

module.exports={
    css:{
        postcss:{
            plugins:[
                require('postcss-pxtorem')({
                    rootValue:10, //即为转换基数 100px --> 10rem
                    propList:['*'] //输入通配符即可，即所有的css均进行rem转换
                })
            ]
        }
    } 
}

/*
*    第二种引用方式
*    在postcss.config.js文件中引用(如果工程中没有，可在一级目录下自建)
*/

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserlist:['Android >= 4.0','iOS >= 7']
        },
        "postcss-pxtorem":{
            rootValue:10,
            propList:['*']
        }
    }
}
  •  px 转 vm/vh 进行屏幕适配

 1.首先需要在vue工程中进行安装(安装之后，如遇运行出错，可安装指定版本)

postcss-px-to-viewport主要用于单位转换(即将px转为vw/vh);

postcss-px-to-viewport也是PostCss(一款使用插件去转换CSS的工具)中的一个插件。

移动端开发强烈建议使用viewport

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

 2.安装完成之后，在工程中进行使用即可(同postcss-pxtorem,使用时的配置不一样)

配置更加详细，根据设计图的尺寸进行视窗的宽度，高度适配即可，建议使用vw单位

/*
*    在postcss.config.js文件中引用(如果工程中没有，可在一级目录下自建)
*/

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserlist:['Android >= 4.0','iOS >= 7']
        },
        "postcss-px-to-viewport": {
            viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度.
            viewportHeight: 1334, // 视窗的高度，对应的是我们设计稿的高度.(也可以不配置)
            unitPrecision: 2, // 保留几位小数，指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
            selectorBlackList: ['tab-bar', 'tab-bar-item','shopping-cart-bottom-bar'], // 指定不需要转换的类
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位.
            mediaQuery: false // 允许在媒体查询中转换`px`
        }
    }
}

希望笔者的总结可以帮到大家， 谢谢！！！