vue項目做屏幕自適應(yīng)處理方式
起由
項目基于vue-cli搭建，之前項目采用less的功能函數(shù)集合媒體查詢做的屏幕適配，但是由于JavaScript的對浮點數(shù)據(jù)處理，這個語言本身的bug問題，總是會出現(xiàn)一些計算誤差，這里重新做的項目采用淘寶的lib-flexible的庫，來做屏幕自適應(yīng)處理。
vue-cli搭建完成以后，安裝完依賴，項目可以運行以后，我們接著安裝felxible庫：
npm i lib-flexible -S
npm安裝不上去的，可以切換到cnpm上來安裝，然后在主文件main.js里面引入：
import 'lib-flexible'
在index.html文件中設(shè)置meta標(biāo)簽：
<meta name='viewport' content='width=device-width ， initial-scale=1.0'>
然后在項目中寫css時會自動將rem轉(zhuǎn)化為px，需要安裝px2rem這個工具，安裝：
npm i px2rem-loader -D
在until.js配置文件對loader做相關(guān)配置：
如上圖，在cssLoader對象下面添加一個px2remLoader對象：
const px2remLoader = {
loader : 'px2rem-loader',
options : {
//這個參數(shù)是通過psd設(shè)計稿的 寬度 / 10 來計算,這里以750為標(biāo)準(zhǔn)
remUnit : 75
}
}然后將utils.js文件中的generateLoaders函數(shù)的loaders常量改為[cssLoader， px2remLoader]
如下圖：
const loaders = [cssLoader， px2remLoader];
這樣就做完了所以配置，當(dāng)你做開發(fā)時，只需要將設(shè)計稿上面量到的尺寸寫出來就可以了，比如font-size:18px;就直接寫18px就可以
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue-cli webpack打包開啟Gzip 報錯問題
這篇文章主要介紹了vue-cli webpack打包開啟Gzip 報錯問題的解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
vue-element-admin中node-sass換成dart-sass,安裝依賴報code?128多種問題的解決
這篇文章主要介紹了vue-element-admin中node-sass換成dart-sass,安裝依賴報code?128多種問題的解決方法,本文給大家分享問題原因分析及解決方法，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue密碼登陸加密RSA實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue+Element-ui實現(xiàn)分頁效果實例代碼詳解
這篇文章主要介紹了vue+Element-ui實現(xiàn)分頁效果 ,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了開啟Vue項目缺少node_models包的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)懸浮球效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
IndexedDB 是一個瀏覽器內(nèi)建的數(shù)據(jù)庫,它可以存放對象格式的數(shù)據(jù),默認(rèn)情況下,瀏覽器會將自身所在的硬盤位置剩余容量全部作為indexedDB的存儲容量,本文給大家介紹了Vue3使用indexDB緩存靜態(tài)資源,需要的朋友可以參考下2024-10-10
基于vue 添加axios組件,解決post傳參數(shù)為null的問題
下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為null的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于vue如何動態(tài)實時的顯示時間，以及vue時間戳 獲取本地時間實時更新的相關(guān)資料，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了vue如何監(jiān)聽el-select選擇值的變化，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04