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

littleGrow 發(fā)布于2019-08-29 15:39 / 980人閱讀

摘要：需求使用腳手架搭建項目，并且使用第三方的庫比如，的時候，因為第三方庫用的都是用單位，無法使用適配不同設(shè)備的屏幕。解決辦法使用插件將第三方庫的轉(zhuǎn)換成單位。否則會出現(xiàn)混亂頁面。

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

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

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

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

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

（3）把px轉(zhuǎn)換成rem的配置完成后，還需要在入口文件（main.js）里面配置一段代碼，此代碼的目的是監(jiān)聽window窗口大小的變化，從而動態(tài)改變html根節(jié)點的font-size的大小。達到適配不同設(shè)備的效果；（注意：不知道為什么要動態(tài)改變html根節(jié)點的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();

上面代碼是為了當(dāng)?shù)谝淮渭虞dmain.js的時候就設(shè)置根節(jié)點的（html節(jié)點）font-size。否則會出現(xiàn)混亂頁面。