Vue移動(dòng)端用淘寶彈性布局lib-flexible插件做適配的方法
淘寶彈性布局lib-flexible
lib-flexible并不單獨(dú)使用，而是搭配px2rem-loader一起做適配方案，目的是自動(dòng)將css中的px轉(zhuǎn)換成rem，在項(xiàng)目中還是按照設(shè)計(jì)稿寫上對(duì)應(yīng)的固定像素（px）就行。
移動(dòng)端適配的具體步驟
第一步：安裝插件 lib-flexible
npm i lib-flexible --save-dev
第二步：安裝px2rem loader
npm install px2rem-loader --save-dev
第三步：在main.js中引入lib-flexible
import 'lib-flexible/flexible'
第四步：在build中的util.js文件中配置px2rem-loader
先找到build文件里面的utils.js文件，找到cssLoaders函數(shù)，把px2rem-loade（下面代碼）添加到函數(shù)中。
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 // remUnit為轉(zhuǎn)換rem的基礎(chǔ) 設(shè)計(jì)稿單位/等分?jǐn)?shù) = remUnit
}
}
然后再找到cssLoaders中的generateLoaders的函數(shù)，添加上px2rem-loader。
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
（請(qǐng)忽略我的編輯器背景，哈哈?。?/p>
項(xiàng)目展示
代碼中頭像寬高樣式為130px,項(xiàng)目是以750px的設(shè)計(jì)稿為例，
以375px的屏幕為例：
以411px的屏幕為例：
以768px的屏幕為例：
總而言之，當(dāng)項(xiàng)目使用來lib-flexible插件后，元素的寬度會(huì)根據(jù)手機(jī)的分辨率大小自動(dòng)調(diào)節(jié)，來實(shí)現(xiàn)移動(dòng)端屏幕的適配！
不過目前此插件已停止維護(hù)，但是不耽誤使用，搜索lib-flexible時(shí)，github上出來的事amfe-flexible，
下面有amfe-flexible的git地址，大家沒事也可以學(xué)習(xí)學(xué)習(xí)，雖然lib-flexible很好用但是我們也要與時(shí)俱進(jìn)啊！ amfe-flexible.
總結(jié)
到此這篇關(guān)于Vue移動(dòng)端用淘寶彈性布局lib-flexible插件做適配的方法的文章就介紹到這了,更多相關(guān)vue移動(dòng)端適配插件lib-flexible內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析
這篇文章主要介紹了基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
ElementPlus 中el-select自定義指令實(shí)現(xiàn)觸底加載請(qǐng)求options數(shù)據(jù)的方法
觸底時(shí),繼續(xù)向后端發(fā)請(qǐng)求獲取下一頁的數(shù)據(jù),請(qǐng)求回來的數(shù)據(jù)合并給options,這篇文章主要介紹了ElementPlus 中el-select自定義指令實(shí)現(xiàn)觸底加載請(qǐng)求options數(shù)據(jù)的操作方法,需要的朋友可以參考下2024-08-08
Vue框架中如何調(diào)用模擬數(shù)據(jù)你知道嗎
這篇文章主要為大家詳細(xì)介紹了Vue框架中如何調(diào)用模擬數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue-cli2 構(gòu)建速度優(yōu)化的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-cli2 構(gòu)建速度優(yōu)化的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
vue 使用微信jssdk,調(diào)用微信相冊(cè)上傳圖片功能
這篇文章主要介紹了vue 使用微信jssdk,調(diào)用微信相冊(cè)上傳圖片功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue中如何設(shè)置全局的cookie對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue3中使用sse最佳實(shí)踐,封裝工具,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)密碼顯示隱藏功能的思路詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
JSON數(shù)組和JSON對(duì)象在vue中的獲取方法
這兩天在學(xué)習(xí)vue，主要是為了實(shí)現(xiàn)前后端的分離，因此數(shù)據(jù)的傳輸是必不可少的一個(gè)環(huán)節(jié)，這篇文章主要介紹了JSON數(shù)組和JSON對(duì)象在vue中的獲取方法,需要的朋友可以參考下2022-09-09
vue+webpack dev本地調(diào)試全局樣式引用失效的解決方案
今天小編就為大家分享一篇vue+webpack dev本地調(diào)試全局樣式引用失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11