方案一：rem+flexible

postcss配置

 "postcss": {
    "plugins": {
      // 将css文件中的px转换成rem,autoprefixer是加上各种浏览器前缀
      "postcss-px2rem": {
        // UI图片的基准值 750px就是75,640px就是64,默认为75  
        "remUnit": 37.5,
        "remPrecision": 6, //准换成rem后的小数点精确数位 默认为6      
        "baseDpr": 2, //基准device pixel ratio值 默认为2  
      },
      "autoprefixer": {
        "overrideBrowserslist": [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8"
        ]
      }
    }
  },
  "postcss-pxtorem": {
    "rootValue": 50, // 根元素字体大小
    "propList": [
      "*"
    ]
  },

适配代码

import 'amfe-flexible/index.js'

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

提示 : 当脱离掉node_modules重新npm install项目依赖时还是需要重新修改一遍的，谨记！

// rem适配
// rem适配原理，改变了一个元素在不同设备上占据的css像素的个数
// 优点：没有破坏完美视口 
// 缺点：px值到rem值到转换太复杂
(function(){
 
  var styleNode = document.createElement("style");
  var w = document.documentElement.clientWidth / 16;
  styleNode.innerHTML = "html{font-size:" + w + "px!important}";
  document.head.appendChild(styleNode)
})()

方案二：viewport 适配

/* viewport 适配的原理，viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的，
但是css像素和物理像素的比例是不一样的，等比的。
优点：所量即所得
缺点：没有使用完美视口*/
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width">
  <title>Document</title>
</head>
<body>

</body>
<script type="text/javascirpt">
  (function(){
    var targetW = 640;
    var scale = document.documentElement.clientWidth/targetW;
    var meta=document.querySelector("meta[name='viewport'");
    meta.content = "initial-scale="+scale + ",minimum-scale="+ scale + ",maximum-scale="+scale+",user-scalable=no";
  })()
</script>
</html>