针对基于设计稿1920*1080的大屏项目做适配，可采用纯rem或者rem + transform scale 两种适配方式

1. 纯rem适配

npm包：

1. postcss-pxtorem
2. amfe-flexible

px转rem

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions"
      ],
      grid: true
    },
    'postcss-pxtorem': {
      rootValue: 192,
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: ['.px'],
    }
  }
}

main.js 引入 amfe-flexible

// main.js
import 'amfe-flexible'

2. rem + transform scale

npm包：

1. postcss-pxtorem

px转rem

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions"
      ],
      grid: true
    },
    'postcss-pxtorem': {
      rootValue: 192,
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: ['.px'],
    }
  }
}

1080px高度自适应方法

// utils/rem.js
/* eslint-disable */
// 基准大小
const baseSize = 192
// 设置 rem 函数
function setRem() {
  // 当前页面高度相对于 1080 高的缩放比例，可根据自己需要修改。
  const clientHeight = document.documentElement.clientHeight;
  const clientWdith = document.documentElement.clientWidth;
  if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
    document.addEventListener('DOMContentLoaded', function () {
      document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 375) + 'px'
    })
    window.addEventListener('resize', function () {
      document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 375) + 'px'
    })
  } else {
    const scale = clientHeight / 1080
    window.currentScale = scale;
    if (scale <= 1) {
      document.documentElement.style = `font-size: ${baseSize * Math.max(scale, 1)}px`;
      document.body.style = `width: ${(clientWdith / scale)}px;transform: scale(${scale});height: ${(clientHeight / scale)}px;transform-origin: left top;`;
    } else {
      document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px';
      document.body.style = ''
    }
  }


}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

main.js 引入 amfe-flexible

// main.js
import './utils/rem.js'