需求：使用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。否則會出現混亂頁面。

?

轉載于:https://www.cnblogs.com/ivan5277/p/10021440.html

總結

以上是生活随笔為你收集整理的vue中使用第三方UI库的移动端rem适配方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。