js中flexible.js實(shí)現(xiàn)淘寶彈性布局方案
本文的內(nèi)容就是介紹淘寶彈性布局方案lib-flexible實(shí)踐,分享給大家供大家參考,具體內(nèi)容如下
1. 頁(yè)面需求
這是要做的頁(yè)面效果(不要對(duì)設(shè)計(jì)置評(píng),這不是開(kāi)發(fā)人員決定的):
這是尺寸標(biāo)注圖(750*1334):
然后美工在750*1334的設(shè)計(jì)稿之上,按我的要求提供以下素材的切圖:
包括兩個(gè)下載按鈕的背景圖片,logo,底部梯形的漸變背景和body部分的mobile 背景圖。注意這些圖片都是在750*1334的設(shè)計(jì)稿里面切出來(lái)的,所以尺寸都是設(shè)計(jì)稿里的原始尺寸,比如android.png:
考慮到retina顯示屏的問(wèn)題,結(jié)合下圖的適配思路:
我認(rèn)為解決retina屏問(wèn)題的可行方案是:
1)在devicePixelRatio<=2時(shí),圖片統(tǒng)一使用750設(shè)計(jì)稿的切圖
2)在devicePixelRatio>=2時(shí),圖片統(tǒng)一使用750*1.5=1125,也就是所謂@3x設(shè)計(jì)稿的切圖。
我把美工給我的在750*1334的設(shè)計(jì)稿下的切圖都放在img/@2x 這個(gè)文件夾下:
然后讓她幫忙把750的設(shè)計(jì)稿矢量放大1.5倍,再按照同樣的切圖要求為我提供@3x的切圖,并放在了img/@3x 這個(gè)文件夾下:
@3x下的圖片理論上尺寸應(yīng)該等于@2x下的圖片*1.5,不過(guò)我的切的沒(méi)有這么完美。
有了前面的需求介紹和素材準(zhǔn)備,下一步就是該引入核心的js文件,編寫(xiě)css樣式了。
2. 引入flexible.js
這一步其實(shí)非常簡(jiǎn)單,只要把flexible.js的內(nèi)容復(fù)制出來(lái),在本地新建一個(gè)flexible.js的文件,打開(kāi)粘貼進(jìn)去就可以了,我把這個(gè)文件放在了js/lib下面:
接著在html頁(yè)面里面,盡可能早的引入這個(gè)js文件(為了讓適配的效果更快):
注:使用lib-flexible,通常不要寫(xiě):
交給flexible.js自動(dòng)處理。
然后在chrome的模擬器里面,選擇iphone6,應(yīng)該就能看到html的font-size已經(jīng)被設(shè)置為font-size: 75px了:
3. 編寫(xiě)CSS
基本要求:
1)除font-size外,其它大小都根據(jù)750標(biāo)注稿的尺寸,轉(zhuǎn)換成rem單位的值,轉(zhuǎn)換方法為:標(biāo)注稿尺寸 / 標(biāo)注稿基準(zhǔn)字體大??;
2)標(biāo)注稿基準(zhǔn)字體大小 = 標(biāo)注稿寬度 / 10,如標(biāo)注稿寬為750,標(biāo)注稿基準(zhǔn)字體大小為75;標(biāo)注稿寬為640,標(biāo)注稿基準(zhǔn)字體大小為64;(所以淘寶這個(gè)方案是可以在任意設(shè)計(jì)稿尺寸下使用的)
3)如果需要設(shè)置font-size,可跟據(jù)html的data-dpr屬性來(lái)處理,類似下面的寫(xiě)法:
[data-dpr="2"] p { font-size: 16px; } [data-dpr="3"] p { font-size: 24px; }
以安卓下載按鈕的樣式為例,說(shuō)明這種用法。android.png的尺寸為:414*80,所以css這么寫(xiě):
.btn { width: 414rem/@font-size-base; height: 80rem/@font-size-base; }
由于用了less,事先定義了一個(gè)變量來(lái)保存標(biāo)注稿基準(zhǔn)字體大?。?/p>
@font-size-base: 75;
所以px2rem的轉(zhuǎn)換變得非常容易,如上所示。less編譯之后,會(huì)將正確的rem值計(jì)算出來(lái):
.btn { width: 5.52rem; height: 1.06666667rem; }
到此,lib-flexible的基本實(shí)踐就結(jié)束了,不過(guò)還有一個(gè)問(wèn)題,就是retina屏的問(wèn)題,到現(xiàn)在都還沒(méi)提到@3x下圖的那些切圖怎么辦,其實(shí)很簡(jiǎn)單,借助html元素的data-dpr屬性,可以輕松實(shí)現(xiàn)另一種媒介查詢,以便在devicePixelRatio>=2的時(shí)候啟用@3x下的圖片,還是以安卓下載按鈕的樣式為例,寫(xiě)法是:
.btn-android { background-image: url("../img/@2x/android.png?v=@@version"); [data-dpr="3"] & { background-image: url("../img/@3x/android.png?v=@@version"); } }
這下就OK了,原先還不知道data-dpr有什么作用,現(xiàn)在看看,作用還是挺大的。
注:
- 1) 由于使用了grunt構(gòu)建,所以需要先安裝node ,git,再通過(guò)npm安裝grunt 和bower
- 2)考慮到將來(lái)可能要做全屏滾動(dòng)的效果,所以這頁(yè)面一開(kāi)始就是用fullpage.js來(lái)做的,通過(guò)bower引入了jquery跟fullpage.js的庫(kù)
- 3) 模塊化用到了requirejs
- 4)運(yùn)行g(shù)runt default完成構(gòu)建,再運(yùn)行g(shù)runt server啟動(dòng)靜態(tài)服務(wù)器預(yù)覽。
以上就是實(shí)現(xiàn)淘寶彈性布局方案lib-flexible實(shí)踐的全部過(guò)程,希望對(duì)大家的學(xué)習(xí)有所啟發(fā)。
- Vue移動(dòng)端用淘寶彈性布局lib-flexible插件做適配的方法
- flexible.js實(shí)現(xiàn)移動(dòng)端rem適配方案
- vue-cli配置flexible過(guò)程詳解
- 詳解vue.js移動(dòng)端配置flexible.js及注意事項(xiàng)
- 基于vue-cli配置lib-flexible + rem實(shí)現(xiàn)移動(dòng)端自適應(yīng)
- 基于 flexible 的 Vue 組件:Toast -- 顯示框效果
- H5移動(dòng)端適配 Flexible方案
- 同步文件備份工具 Super Flexible File Synchronizer Pro v4
- Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解
相關(guān)文章
JavaScript遍歷Json串瀏覽器輸出的結(jié)果不統(tǒng)一問(wèn)題
json串屬于javascript的一個(gè)對(duì)象,有鍵和值對(duì)應(yīng)的對(duì)象。這篇文章主要介紹了JavaScript遍歷Json串瀏覽器輸出的結(jié)果不統(tǒng)一問(wèn)題的相關(guān)資料,需要的朋友可以參考下2016-11-11JavaScript設(shè)計(jì)模式之職責(zé)鏈模式詳解
職責(zé)鏈模式的定義是:使多個(gè)對(duì)象都有機(jī)會(huì)處理請(qǐng)求,從而避免請(qǐng)求的發(fā)送者和接收者之間的耦合關(guān)系,將這些對(duì)象連成一條鏈,并沿著這條鏈傳遞該請(qǐng)求,直到有一個(gè)對(duì)象處理它為止2022-08-08JS實(shí)現(xiàn)黑色大氣的二級(jí)導(dǎo)航菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)黑色大氣的二級(jí)導(dǎo)航菜單效果,具有延遲響應(yīng)鼠標(biāo)事件顯示切換效果的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09手寫(xiě)Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash
這篇文章主要介紹了手寫(xiě)Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash,接下來(lái)將會(huì)帶你們了解下這兩者的區(qū)別,以及我們?cè)撊绾问謱?xiě)實(shí)現(xiàn)這兩個(gè)函數(shù)2022-03-03微信小程序點(diǎn)擊列表跳轉(zhuǎn)到對(duì)應(yīng)詳情頁(yè)過(guò)程解析
這篇文章主要介紹了微信小程序點(diǎn)擊列表跳轉(zhuǎn)到對(duì)應(yīng)詳情頁(yè)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09微信小程序中使用自定義字體的實(shí)現(xiàn)與體驗(yàn)優(yōu)化
由于微信支持的字體非常有限,不能滿足個(gè)性化的需求,因此在開(kāi)發(fā)的過(guò)程中可能會(huì)需要使用自定義字體,下面這篇文章主要給大家介紹了關(guān)于微信小程序中使用自定義字體的實(shí)現(xiàn)與體驗(yàn)優(yōu)化的相關(guān)資料,需要的朋友可以參考下2022-02-02JavaScript實(shí)現(xiàn)緩動(dòng)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)緩動(dòng)動(dòng)畫(huà),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11