vue項(xiàng)目做屏幕自適應(yīng)處理方式
起由
項(xiàng)目基于vue-cli搭建，之前項(xiàng)目采用less的功能函數(shù)集合媒體查詢做的屏幕適配，但是由于JavaScript的對(duì)浮點(diǎn)數(shù)據(jù)處理，這個(gè)語(yǔ)言本身的bug問(wèn)題，總是會(huì)出現(xiàn)一些計(jì)算誤差，這里重新做的項(xiàng)目采用淘寶的lib-flexible的庫(kù)，來(lái)做屏幕自適應(yīng)處理。
vue-cli搭建完成以后，安裝完依賴，項(xiàng)目可以運(yùn)行以后，我們接著安裝felxible庫(kù)：
npm i lib-flexible -S
npm安裝不上去的，可以切換到cnpm上來(lái)安裝，然后在主文件main.js里面引入：
import 'lib-flexible'
在index.html文件中設(shè)置meta標(biāo)簽：
<meta name='viewport' content='width=device-width ， initial-scale=1.0'>
然后在項(xiàng)目中寫css時(shí)會(huì)自動(dòng)將rem轉(zhuǎn)化為px，需要安裝px2rem這個(gè)工具，安裝：
npm i px2rem-loader -D
在until.js配置文件對(duì)loader做相關(guān)配置：
如上圖，在cssLoader對(duì)象下面添加一個(gè)px2remLoader對(duì)象：
const px2remLoader = {
loader : 'px2rem-loader',
options : {
//這個(gè)參數(shù)是通過(guò)psd設(shè)計(jì)稿的 寬度 / 10 來(lái)計(jì)算,這里以750為標(biāo)準(zhǔn)
remUnit : 75
}
}然后將utils.js文件中的generateLoaders函數(shù)的loaders常量改為[cssLoader， px2remLoader]
如下圖：
const loaders = [cssLoader， px2remLoader];
這樣就做完了所以配置，當(dāng)你做開(kāi)發(fā)時(shí)，只需要將設(shè)計(jì)稿上面量到的尺寸寫出來(lái)就可以了，比如font-size:18px;就直接寫18px就可以
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
打包組件報(bào)錯(cuò):Error:Cannot?find?module?'vue/compiler-sfc&ap
最近遇到這樣的問(wèn)題,vue組件庫(kù)搭建過(guò)程中使用webpack打包組件時(shí)報(bào)錯(cuò),本文給大家分享打包組件報(bào)錯(cuò):Error:?Cannot?find?module?‘vue/compiler-sfc‘的解決方法,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了安裝vue/cli后查看版本顯示找不到vue指令的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
v-model通常用于input的雙向數(shù)據(jù)綁定,它并不會(huì)向子組件傳遞數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue2和vue3組件v-model區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue的路由映射問(wèn)題及解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
本篇文章來(lái)講解渲染函數(shù) & JSX，Vue 推薦在絕大多數(shù)情況下使用模板來(lái)創(chuàng)建你的 HTML。然而在一些場(chǎng)景中，你真的需要 JavaScript 的完全編程的能力。這時(shí)我們可以用渲染函數(shù)，它比模板更接近編譯器,需要的朋友可以參考一下2021-09-09
vue如何實(shí)現(xiàn)本項(xiàng)目頁(yè)面之間跳轉(zhuǎn)
這篇文章主要介紹了vue如何實(shí)現(xiàn)本項(xiàng)目頁(yè)面之間跳轉(zhuǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue中怎么區(qū)分不同的環(huán)境，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例
這篇文章主要介紹了vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
基于ElementUI中Table嵌套實(shí)現(xiàn)多選的示例代碼
這篇文章主要介紹了基于ElementUI中Table嵌套實(shí)現(xiàn)多選的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03