方案一：rem

步骤一：新建rem.js,然后引入到页面即可

(function (doc, win) {
    var docEl = doc.documentElement
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    var reCalc = function () {
      var clientWidth = docEl.clientWidth
      if (!clientWidth) return
      docEl.style.fontSize = 16 * (clientWidth / 320) + 'px'
    }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, reCalc, false)
    doc.addEventListener('DOMContentLoaded', reCalc, false)
})(document, window)

步骤二：新建base.scss文件并定义rem转px函数

$browser-default-font-size:16px!default;//iphone6
html,body{
    font-size:$browser-default-font-size;
}
@function px2rem($px){
    @return $px/$browser-default-font-size*1rem;
}

步骤三：代码中所有尺寸都用px2rem()进行转换，例如：

div{
	width:px2rem(100px);
    height:px2rem(100px);
    fonst-size:px2rem(20px);
}

方案二：vw方案，借用插件

步骤一：安装插件

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

步骤二：增加配置

新建完成后会自动创建postcss.config.js文件,如果没用可自行创建，与package.json文件在同一目录下
增加以下配置即可：
module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    'postcss-px-to-viewport':{
      unitToConvert: 'px',// 要转化的单位
      viewportWidth: 750,// UI设计稿的宽度
      unitPrecision: 6,// 转换后的精度，即小数点位数
      propList: ['*'],// 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: 'vw',// 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: 'vw',// 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: [],// 指定不转换为视窗单位的类名，
      minPixelValue: 1,// 默认值1，小于或等于1px则不进行转换
      mediaQuery: true,// 是否在媒体查询的css代码中也进行转换，默认false
      replace: true,// 是否转换后直接更换属性值
      exclude: undefined,// 设置忽略文件，用正则做目录名匹配
      include: undefined,
      landscape: false,// 是否处理横屏情况
      landscapeUnit: 'vw',
      landscapeWidth: 568
    }
  }
}

补充说明：

高度尽量用em或者不转换高度，可以避免高度错位的问题。