vue中使用第三方UI庫的移動端rem適配方案

需求：使用vue-cli腳手架搭建項目，並且使用第三方的UI庫（比如vant，mint ui）的時候，因為第三方庫用的都是用px單位，無法使用rem適配不同設備的屏幕。

解決辦法：使用px2rem-loader插件將第三方ui庫的px轉換成rem單位。

(1) npm install px2rem-loader --save-dev 安裝插件
(2)然后在vue-cli項目找到built/utils文件，在里面加上以下代碼：

var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 // (這里是指設計稿的寬度為 750 / 10) } }

然后在generateLoaders函數里面插入px2remLoader ，再重啟 npm run dev服務即可。

 

（3）把px轉換成rem的配置完成后，還需要在入口文件（main.js）里面配置一段代碼，此代碼的目的是監聽window窗口大小的變化，從而動態改變html根節點的font-size的大小。達到適配不同設備的效果；（注意：不知道為什么要動態改變html根節點的font-size的話，建議去看一下rem的知識）

window.onresize = setHtmlFontSize; function setHtmlFontSize(){ const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; const htmlDom = document.getElementsByTagName('html')[0]; htmlDom.style.fontSize = htmlWidth / 10 + 'px'; }; setHtmlFontSize(); 

上面代碼是為了當第一次加載main.js的時候就設置根節點的（html節點）font-size。否則會出現混亂頁面。