欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js中flexible.js實現(xiàn)淘寶彈性布局方案

 更新時間:2020年06月23日 17:14:30   投稿:lijiao  
這篇文章主要為大家詳細(xì)介紹了js中flexible.js實現(xiàn)淘寶彈性布局方案,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文的內(nèi)容就是介紹淘寶彈性布局方案lib-flexible實踐,分享給大家供大家參考,具體內(nèi)容如下

1. 頁面需求

這是要做的頁面效果(不要對設(shè)計置評,這不是開發(fā)人員決定的):

這是尺寸標(biāo)注圖(750*1334):

然后美工在750*1334的設(shè)計稿之上,按我的要求提供以下素材的切圖:

包括兩個下載按鈕的背景圖片,logo,底部梯形的漸變背景和body部分的mobile 背景圖。注意這些圖片都是在750*1334的設(shè)計稿里面切出來的,所以尺寸都是設(shè)計稿里的原始尺寸,比如android.png:

考慮到retina顯示屏的問題,結(jié)合下圖的適配思路:

我認(rèn)為解決retina屏問題的可行方案是:

1)在devicePixelRatio<=2時,圖片統(tǒng)一使用750設(shè)計稿的切圖

2)在devicePixelRatio>=2時,圖片統(tǒng)一使用750*1.5=1125,也就是所謂@3x設(shè)計稿的切圖。

我把美工給我的在750*1334的設(shè)計稿下的切圖都放在img/@2x 這個文件夾下:

然后讓她幫忙把750的設(shè)計稿矢量放大1.5倍,再按照同樣的切圖要求為我提供@3x的切圖,并放在了img/@3x 這個文件夾下:

@3x下的圖片理論上尺寸應(yīng)該等于@2x下的圖片*1.5,不過我的切的沒有這么完美。

有了前面的需求介紹和素材準(zhǔn)備,下一步就是該引入核心的js文件,編寫css樣式了。

2. 引入flexible.js

這一步其實非常簡單,只要把flexible.js的內(nèi)容復(fù)制出來,在本地新建一個flexible.js的文件,打開粘貼進(jìn)去就可以了,我把這個文件放在了js/lib下面:

接著在html頁面里面,盡可能早的引入這個js文件(為了讓適配的效果更快):

注:使用lib-flexible,通常不要寫:

復(fù)制代碼 代碼如下:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

交給flexible.js自動處理。

然后在chrome的模擬器里面,選擇iphone6,應(yīng)該就能看到html的font-size已經(jīng)被設(shè)置為font-size: 75px了:

3. 編寫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;(所以淘寶這個方案是可以在任意設(shè)計稿尺寸下使用的)

3)如果需要設(shè)置font-size,可跟據(jù)html的data-dpr屬性來處理,類似下面的寫法:

[data-dpr="2"] p {
 font-size: 16px;
}

[data-dpr="3"] p {
 font-size: 24px;
}

以安卓下載按鈕的樣式為例,說明這種用法。android.png的尺寸為:414*80,所以css這么寫:

.btn {
 width: 414rem/@font-size-base;
 height: 80rem/@font-size-base;
}

由于用了less,事先定義了一個變量來保存標(biāo)注稿基準(zhǔn)字體大小:

@font-size-base: 75;
所以px2rem的轉(zhuǎn)換變得非常容易,如上所示。less編譯之后,會將正確的rem值計算出來:

.btn {
 width: 5.52rem;
 height: 1.06666667rem;
}

到此,lib-flexible的基本實踐就結(jié)束了,不過還有一個問題,就是retina屏的問題,到現(xiàn)在都還沒提到@3x下圖的那些切圖怎么辦,其實很簡單,借助html元素的data-dpr屬性,可以輕松實現(xiàn)另一種媒介查詢,以便在devicePixelRatio>=2的時候啟用@3x下的圖片,還是以安卓下載按鈕的樣式為例,寫法是:

.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,再通過npm安裝grunt 和bower
  • 2)考慮到將來可能要做全屏滾動的效果,所以這頁面一開始就是用fullpage.js來做的,通過bower引入了jquery跟fullpage.js的庫
  • 3) 模塊化用到了requirejs
  • 4)運(yùn)行g(shù)runt default完成構(gòu)建,再運(yùn)行g(shù)runt server啟動靜態(tài)服務(wù)器預(yù)覽。

以上就是實現(xiàn)淘寶彈性布局方案lib-flexible實踐的全部過程,希望對大家的學(xué)習(xí)有所啟發(fā)。

相關(guān)文章

  • 淺談JS中var,let和const的區(qū)別

    淺談JS中var,let和const的區(qū)別

    這篇文章主要介紹了淺談JS中var,let和const的區(qū)別,let和const是ES6新增的關(guān)鍵字,詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的朋友可以參考一下
    2022-07-07
  • 微信小程序之購物車功能

    微信小程序之購物車功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序之購物車功能的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • JavaScript遍歷Json串瀏覽器輸出的結(jié)果不統(tǒng)一問題

    JavaScript遍歷Json串瀏覽器輸出的結(jié)果不統(tǒng)一問題

    json串屬于javascript的一個對象,有鍵和值對應(yīng)的對象。這篇文章主要介紹了JavaScript遍歷Json串瀏覽器輸出的結(jié)果不統(tǒng)一問題的相關(guān)資料,需要的朋友可以參考下
    2016-11-11
  • 超級兔子讓浮動層消失的前因后果

    超級兔子讓浮動層消失的前因后果

    超級兔子讓浮動層消失的前因后果...
    2007-03-03
  • JavaScript設(shè)計模式之職責(zé)鏈模式詳解

    JavaScript設(shè)計模式之職責(zé)鏈模式詳解

    職責(zé)鏈模式的定義是:使多個對象都有機(jī)會處理請求,從而避免請求的發(fā)送者和接收者之間的耦合關(guān)系,將這些對象連成一條鏈,并沿著這條鏈傳遞該請求,直到有一個對象處理它為止
    2022-08-08
  • JS實現(xiàn)黑色大氣的二級導(dǎo)航菜單效果

    JS實現(xiàn)黑色大氣的二級導(dǎo)航菜單效果

    這篇文章主要介紹了JS實現(xiàn)黑色大氣的二級導(dǎo)航菜單效果,具有延遲響應(yīng)鼠標(biāo)事件顯示切換效果的功能,非常簡單實用,需要的朋友可以參考下
    2015-09-09
  • 手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash

    手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash

    這篇文章主要介紹了手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash,接下來將會帶你們了解下這兩者的區(qū)別,以及我們該如何手寫實現(xiàn)這兩個函數(shù)
    2022-03-03
  • 微信小程序點擊列表跳轉(zhuǎn)到對應(yīng)詳情頁過程解析

    微信小程序點擊列表跳轉(zhuǎn)到對應(yīng)詳情頁過程解析

    這篇文章主要介紹了微信小程序點擊列表跳轉(zhuǎn)到對應(yīng)詳情頁過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-09-09
  • 微信小程序中使用自定義字體的實現(xiàn)與體驗優(yōu)化

    微信小程序中使用自定義字體的實現(xiàn)與體驗優(yōu)化

    由于微信支持的字體非常有限,不能滿足個性化的需求,因此在開發(fā)的過程中可能會需要使用自定義字體,下面這篇文章主要給大家介紹了關(guān)于微信小程序中使用自定義字體的實現(xiàn)與體驗優(yōu)化的相關(guān)資料,需要的朋友可以參考下
    2022-02-02
  • JavaScript實現(xiàn)緩動動畫

    JavaScript實現(xiàn)緩動動畫

    這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)緩動動畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11

最新評論