本文的內(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ā)。

最新評(píng)論