Vue移動端用淘寶彈性布局lib-flexible插件做適配的方法
淘寶彈性布局lib-flexible
lib-flexible并不單獨(dú)使用,而是搭配px2rem-loader一起做適配方案,目的是自動將css中的px轉(zhuǎn)換成rem,在項(xiàng)目中還是按照設(shè)計(jì)稿寫上對應(yīng)的固定像素(px)就行。
移動端適配的具體步驟
第一步:安裝插件 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 }) }) }
(請忽略我的編輯器背景,哈哈?。?/p>
項(xiàng)目展示
代碼中頭像寬高樣式為130px,項(xiàng)目是以750px的設(shè)計(jì)稿為例,
以375px的屏幕為例:
以411px的屏幕為例:
以768px的屏幕為例:
總而言之,當(dāng)項(xiàng)目使用來lib-flexible插件后,元素的寬度會根據(jù)手機(jī)的分辨率大小自動調(diào)節(jié),來實(shí)現(xiàn)移動端屏幕的適配!
不過目前此插件已停止維護(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移動端用淘寶彈性布局lib-flexible插件做適配的方法的文章就介紹到這了,更多相關(guān)vue移動端適配插件lib-flexible內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問題
這篇文章主要介紹了vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05詳解vue中使用express+fetch獲取本地json文件
本篇文章主要介紹了詳解vue中使用express+fetch獲取本地json文件,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動態(tài)刷新功能
這篇文章主要介紹了vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動態(tài)刷新功能,需要的朋友可以參考下2019-04-04解決Vue-Router升級導(dǎo)致的Uncaught (in promise)問題
這篇文章主要介紹了解決Vue-Router升級導(dǎo)致的Uncaught (in promise)問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue element-ui el-tooltip組件失效問題及解決
這篇文章主要介紹了vue element-ui el-tooltip組件失效問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10Vue?websocket封裝實(shí)現(xiàn)方法詳解
項(xiàng)目中需要使用websocke,這個(gè)是我自己修修改改好多次之后用得最順手的一版,分享一下。這個(gè)封裝需要搭配vuex使用,因?yàn)槭盏降臄?shù)據(jù)都保存在vuex中了,真的絕絕子好用,解決了我一大堆問題2022-09-09