使用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的