vue項(xiàng)目在webpack2實(shí)現(xiàn)移動(dòng)端字體自適配功能
使用vue開(kāi)發(fā)移動(dòng)端頁(yè)面時(shí)，往往需要實(shí)現(xiàn)頁(yè)面根據(jù)不同設(shè)備屏幕進(jìn)行尺寸的適配，實(shí)現(xiàn)將px自動(dòng)換算成rem單位，其實(shí)只需要安裝下面的兩個(gè)插件即可快速實(shí)現(xiàn)移動(dòng)端適配問(wèn)題。
1 準(zhǔn)備工作：
a. 安裝 px2rem-loader 插件：npm install px2rem-loader --save；
b. 安裝 lib-flexible 插件：npm install lib-flexible --save;
2 插件的作用：
px2rem-loader插件的作用：我們通過(guò)配置基準(zhǔn)，實(shí)現(xiàn)將px自動(dòng)換算成rem，
lib-flexible插件的作用：根節(jié)點(diǎn)會(huì)根據(jù)頁(yè)面視口變化而變化font-size大小。
3 在utils.js文件配置px2rem-loader：
安裝完上邊兩個(gè)插件后，可以在package.json中查看到是否安裝成功，以及他們的版本信息，其實(shí)一般安裝插件時(shí)，如果沒(méi)有自己指定版本，基本都會(huì)自動(dòng)安裝最新的版本。
4.打開(kāi)build目錄里邊的utils.js文件：
找到下邊對(duì)應(yīng)的位置，添加紅色框的代碼：
比如我拿到的是750的設(shè)計(jì)稿，而我這里又配置成以750為基準(zhǔn)，所以寫(xiě)樣式時(shí)，設(shè)計(jì)稿標(biāo)注的是多少px我就直接寫(xiě)成多少px就行，瀏覽器會(huì)自動(dòng)換算rem單位。
在當(dāng)前文件中，找到下邊的generateLoaders (loader, loaderOptions)方法，將剛才新加的px2remLoader對(duì)象添加到下邊下劃線(xiàn)位置即可
然后打開(kāi)當(dāng)前項(xiàng)目的首頁(yè)入口文件index.html：
新增meta標(biāo)簽：
關(guān)于上圖中meta標(biāo)簽里邊相關(guān)屬性的簡(jiǎn)單描述：
viewport：簡(jiǎn)單來(lái)說(shuō)就是指當(dāng)前移動(dòng)設(shè)備瀏覽器用于顯示網(wǎng)頁(yè)內(nèi)容的可視區(qū)域，移動(dòng)設(shè)備一般會(huì)自動(dòng)給它設(shè)置默認(rèn)值為980px或1024px(詳細(xì)信息有興趣可以自行網(wǎng)上查看下)；
width=device-width：表示當(dāng)前布局視口與理想視口一致 ( js獲取理想視口：window.screen.width )。
initial-scale：設(shè)置頁(yè)面初次顯示時(shí)的縮放比例，值為1.0時(shí)表示當(dāng)前顯示的是未經(jīng)縮放的頁(yè)面。
其實(shí)在content里邊還可以設(shè)置其它屬性，比如：
maximum-scale：頁(yè)面的最大縮放比例；
minimum-scale：頁(yè)面的最小縮放比例；
user-scalable：用戶(hù)是否可以手動(dòng)縮放頁(yè)面，值可以為no或yes，分別表示不允許縮放和允許縮放。
4 在項(xiàng)目中使用lib-flexible：
只需要在當(dāng)前項(xiàng)目的main.js中引入：lib-flexible/flexible
5 效果：
6 總結(jié)：
通過(guò)上邊在utils.js文件中對(duì)使用px2rem進(jìn)行相關(guān)的中配置后，成功實(shí)現(xiàn)了自動(dòng)將px換算成rem；
在main.js中引入lib-flexible/flexible,成功實(shí)現(xiàn)根節(jié)點(diǎn)根據(jù)頁(yè)面視口變化而變化font-size大小。
畫(huà)重點(diǎn)：
配置了rem，項(xiàng)目中樣式直接寫(xiě)px就行，瀏覽器中看到的都是自動(dòng)換算成rem的
到此這篇關(guān)于vue項(xiàng)目在webpack2實(shí)現(xiàn)移動(dòng)端字體自適配的文章就介紹到這了,更多相關(guān)vue webpack2 移動(dòng)端字體自適配內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的代碼詳解
這篇文章給大家介紹了ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的詳細(xì)步驟,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
element-plus的自動(dòng)導(dǎo)入和按需導(dǎo)入方式詳解
之前使用 ElementPlus 做項(xiàng)目的時(shí)候,由于不會(huì)使用按需引入耽誤了不少時(shí)間,這篇文章主要給大家介紹了關(guān)于element-plus自動(dòng)導(dǎo)入和按需導(dǎo)入的相關(guān)資料,需要的朋友可以參考下2022-08-08
在vant中使用時(shí)間選擇器和popup彈出層的操作
這篇文章主要介紹了在vant中使用時(shí)間選擇器和popup彈出層的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
本文將介紹父組件與子組件之間傳遞數(shù)據(jù)的四種方法,以一個(gè)簡(jiǎn)單的小demo為例,通過(guò)實(shí)例全方位解析和代碼演示,便于大家理解,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue版日歷組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了vue.js實(shí)現(xiàn)全屏顯示功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用實(shí)例詳解
訂閱發(fā)布模式定義了一種一對(duì)多的依賴(lài)關(guān)系，讓多個(gè)訂閱者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象。這篇文章主要介紹了發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用,需要的朋友可以參考下2019-06-06
在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹
這篇文章主要介紹了在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
眾所周知Axios是一個(gè)基于promise的HTTP庫(kù),可以用在瀏覽器和 node.js中,下面這篇文章主要給大家介紹了關(guān)于vue2中使用axios及axios攔截器的配置的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue-router 起步步驟詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03