移动端适配方案

1.使用rem

思想：用rem代替px

引入以下代码，会根据不同的屏幕宽度动态设置根标签的fontSize的值，UI以频宽为750px为标准进行设计即可适配不同的机型，注意的是全局的px要用rem替代，这时1rem = 1px

(function (doc, win) {
  var docEl = doc.documentElement,
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    if(clientWidth>=750){
      docEl.style.fontSize = '100px'
    } else{
      docEl.style.fontSize = clientWidth / 750 + 'px' // 核心：以750px为频宽即iphone SE频宽的两倍
    }
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

因为都是以750px为频宽进行ui界面设计，所以750rem即为频宽，故以下为验证此方案可适配不同频宽，
频宽为375px时，1rem = 0.5px，750rem = 375px
频宽为450px时，1rem = 0.6px，750rem = 450px

2.使用postcss-px-to-viewport插件

思想：用viewport代替px 

1.安装

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

2.配置

// webpack.config.js
import PostcssPxToViewport from 'postcss-px-to-viewport'

config.postcss.plugins = [
  PostcssPxToViewport({
    unitToConvert:'px', // 需要转化的单位
    viewportUnit:'vw', // 转化成的viewport单位，默认vw
	viewportWidth:750, // UI设计稿宽度
	unitPrecision:6, // 转化精度
	minPixelValue:1, // 小于或等于1时不作转化，默认1
	selectorBlackList:['postcss-ignore'], // 不转化为viewport单位的类名
	mediaQuery:true, // 媒体查询后是否也作转化，默认false
	exclude:[/node_modules/], // 排除的目录或文件
  })
]

3.注意：对于内联和外联css都生效，对于行内css和js动态改变的css不会生效