移动端适配方案

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
    // 核心：以750px为频宽即iphone SE频宽的两倍
    docEl.style.fontSize = clientWidth >= 750 ? '100px' : (clientWidth / 750 + 'px' )
  }
  win.addEventListener(resizeEvt, recalc, false) // 移动设备旋转或PC端页面视口改变事件
  doc.addEventListener('DOMContentLoaded', recalc, false) // DOM Tree加载完毕
})(document, window);

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

• 频宽为375px时：1rem = 0.5px，750rem = 375px
• 频宽为450px时：1rem = 0.6px，750rem = 450px

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

思想：用viewport代替px

安装

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

配置

// 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/], // 排除的目录或文件
  })
]

注意：此方案仅对内联和外联css生效，对于行内css和js动态改变的css不会生效

补充

meta标签的name属性指定为viewport时，可以通过content属性进行设备页面视口信息的配置

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"
>
<-- 视口宽度为设备宽度，初始缩放值为1.0，最大缩放值1.0，不允许用户进行缩放 !-->

• width：页面视口宽度
• height：页面视口高度
• user-scalable：是否允许用户进行缩放,值为0或1
• initial-scale：页面初始缩放值
• minimum-scale：最小缩放值
• maximum-scale：最大缩放值