使用Flexible 實現手淘H5 頁面的終端適配學習

Amfe阿里無線前端團隊雙11技術連載之際,一個實戰案例來展現多終端適配.

Device metrics

1.0 mdpi

2.0 xhdpi

3.0xxhdpi(iphone 6 plus)

手淘h5要試配的終端設備數據

只出一套IOS平臺設計稿， 但隨着iphone 6 iphone6+的出現，今後終端tdsgukjg已再也不是ANdroid系列了，ipo

 

iphone 6  750*1134

iphone 6 plus 414*736

設計師和前端開發之間又應彩什麼協做模式？

選擇一種尺寸做爲設計和開發基準

定義一套適配規則，自動適配剩下的兩種尺寸（你懂的）

特殊配適效果給出設計效果。

手淘設計師常選擇iphone6 做爲基準設計

交互給前端的是750*1334

自動適配到其它規則

前端開發完成終端適配方案

flexible 方案

視窗viewport

viewport 嚴格等於瀏覽器的窗口，有點複雜

移動端的viewport太窄， 爲了能更好爲css布避服務，

兩個view port 

viewportvisualviewport和佈局的 viewportlayoutviewport

虛擬， 佈局

這兩個概念

ppk 寫的相關教程

物理像素

設備像素

物理部件顏色和亮度，微小距離

設備獨立像素（density-independent pixel）

密度無關像素， 一個點， 由程序使用的虛擬像素養.

相關係統轉換爲物理像素

css 像素

抽象的單位， 主要使用在瀏覽器上， Ｗeb頁面上的內容， 通常，CSS像素稱爲與設備無關的像素

ＤＩＰＳ  device-independent pixel

屏幕密度

像素數量， 每英寸有多少像素來計算

設備像素比  device pixel ratio

dpr

設備像素比 ＝ 物理像素/設備獨立像素

window.devicePixelRatio 當前設備的dpr.

-webkit-device-pixel-ratio

-webkit-min-device-pixel-ratio

-webkit-max-device-pixel-ratio

dip dp    設備獨立像素 與屏幕密度有關。dip 能夠

用來輔助區分視網膜設備仍是非視網膜設備

css pixel    Standard       Retian

Eevice pixel  

275pt*667pt  設備獨立像素 dpr爲2 

物理像素養    750*1334

在不一樣的屏幕上 css 像素所呈現的物理尺寸

是一致的， 而不一樣的是css像素所對應的物理像素養

是不一致的。

Layout 以外

圖片的試配

內容是什麼格式的

放在兩倍的圖片新版本

imageOption  優化圖片文件的大小

手動優化細節， 

兩個版本的圖片

css 背景圖？

IMG標籤， 轉換成css 背景的圖片。

IMG標籤上加上原圖的寬高。

網頁的比例和最大比例被設置爲100%；

CSS 單位ren

font size of the root element

相對於根元素的html 的font-size來計算

lig-flexible 的庫

製做h5適合的開源庫， Javascript 和 Css 文件

data-dpr 屬性，   以及一個font-size  樣式。

data-dpr值 font-size:75px.

<meta name="flexible" content="initial-dpr=2" />

 默認設置的值

對於Android ， 認爲dpr 爲1

動態改寫meta 標籤

給html元素加  data-dpr屬性, 而且動態改寫data-dpr的值

font-size屬性     而且動態改寫 font-size