使用vue開發移動端頁面時，往往需要實現頁面根據不同裝置螢幕進行尺寸的適配，實現將px自動換算成rem單位，其實只需要安裝下面的兩個外掛即可快速實現移動端適配問題。

1 準備工作：
a. 安裝 px2rem-loader 外掛：npm install px2rem-loader --save；

b. 安裝 lib-flexible 外掛：npm install lib-flexible --save;

2 外掛的作用：
px2rem-loader外掛的作用：我們通過配置基準，實現將px自動換算成rem，
lib-flexible外掛的作用：根節點會根據頁面視口變化而變化font-size大小。

3 在utils.js檔案配置px2rem-loader：
安裝完上邊兩個外掛後，可以在package.json中檢視到是否安裝成功，以及他們的版本資訊，其實一般安裝外掛時，如果沒有自己指定版本，基本都會自動安裝最新的版本。

4.開啟build目錄裡邊的utils.js檔案：

找到下邊對應的位置，新增紅色框的程式碼：

比如我拿到的是750的設計稿，而我這裡又配置成以750為基準，所以寫樣式時，設計稿標註的是多少px我就直接寫成多少px就行，瀏覽器會自動換算rem單位。

在當前檔案中，找到下邊的generateLoaders (loader,loaderOptions)方法，將剛才新加的px2remLoader物件新增到下邊下劃線位置即可

然後開啟當前專案的首頁入口檔案index.html：

新增meta標籤：

關於上圖中meta標籤裡邊相關屬性的簡單描述：

viewport：簡單來說就是指當前移動裝置瀏覽器用於顯示網頁內容的可視區域，移動裝置一般會自動給它設定預設值為980px或1024px(詳細資訊有興趣可以自行網上檢視下)；

width=device-width：表示當前佈局視口與理想視口一致 ( js獲取理想視口：window.screen.width )。

initial-scale：設定頁面初次顯示時的縮放比例，值為1.0時表示當前顯示的是未經縮放的頁面。

其實在content裡邊還可以設定其它屬性，比如：

maximum-scale

minimum-scale：頁面的最小縮放比例；

user-scalable：使用者是否可以手動縮放頁面，值可以為no或yes，分別表示不允許縮放和允許縮放。

4 在專案中使用lib-flexible：

只需要在當前專案的main.js中引入：lib-flexible/flexible

5 效果：

6 總結：

通過上邊在utils.js檔案中對使用px2rem進行相關的中配置後，成功實現了自動將px換算成rem；

在main.js中引入lib-flexible/flexible,成功實現根節點根據頁面視口變化而變化font-size大小。

畫重點：
配置了rem，專案中樣式直接寫px就行，瀏覽器中看到的都是自動換算成rem的

到此這篇關於vue專案在webpack2實現移動端字型自適配的文章就介紹到這了,更多相關vue webpack2 移動端字型自適配內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！