VUE移動端適配

VUE移動端適配

安裝：npm install postcss-pxtorem@5.1.1 --save

// 注意：6.0.0版本配置有誤，暫未去了解處理；

// 解決辦法:安裝5.1.1版本，實測該版本能用

一、在src目錄下新建 libs/rem.js 文件
放入以下代碼：

(function (doc, win) {
  var docEl = doc.documentElement
  var isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  var dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1
  dpr = window.top === window.self ? dpr : 1
  // 被iframe引用時，禁止縮放
  dpr = 1
  var scale = 1 / dpr
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  docEl.dataset.dpr = dpr
  var metaEl = doc.createElement('meta')
  metaEl.name = 'viewport'
  metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale
  docEl.firstElementChild.appendChild(metaEl)
  var recalc = function () {
    var width = docEl.clientWidth
    if (width / dpr > 750) {
      width = 750 * dpr
    }
    // 乘以100，px : rem = 100 : 1
    docEl.style.fontSize = 100 * (width / 750) + 'px'
  }
  recalc()
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
})(document, window)

 

二、在main.js中引用

import './libs/rem.js'

 

三、修改.postcssrc.js 文件
在module.exports的plugins中加入：

"postcss-pxtorem": {
    "rootValue": 100,
    "propList": ["*"]
}

 

完成，在項目中開發直接可以按照px單位來開發

設計圖為750PX基准，打包以后的單位為100px=1rem；更方便於開發

完事以后記得重新運行喲！