從pc端到移動(dòng)端， 布局上最大的改變就是要兼容不同大小的設(shè)備。
pc端雖然針對(duì)不同的屏幕大小，我們常用固定網(wǎng)頁(yè)寬度，整體居中來(lái)實(shí)現(xiàn)。
移動(dòng)端則需要一套自適應(yīng)的方案。
方案1 %
- 寬度用％代替px。
但這種實(shí)現(xiàn)css可讀性很差，百分比布局的時(shí)候依賴父容器的大小， 值的計(jì)算不方便。
子組件之間如果同時(shí)有百分比和px，往往需要給百分比額外加容器。
方案2 rem
用rem單位代替％， （vh，vw）
方案1的缺點(diǎn)都沒(méi)有了。
但還是有一些細(xì)節(jié)不如人意
為什么app上的border這么細(xì)，H5就不能細(xì)點(diǎn)嗎？
從設(shè)計(jì)稿的px 到 rem還是需要一個(gè)計(jì)算。
方案3 手淘flexible
原文 https://github.com/amfe/lib-flexible
頁(yè)面加載初始，引入一個(gè)js文件。
對(duì)不同設(shè)備設(shè)置其對(duì)應(yīng)的dpi。 （設(shè)備像素比(device pixel ratio)）
＊設(shè)備像素比 ＝ 物理像素 / 設(shè)備獨(dú)立像素
于是我們真正實(shí)現(xiàn)的頁(yè)面大小是該設(shè)備能顯示的物理像素大小。
然后通過(guò) viewport 對(duì)網(wǎng)頁(yè)縮放對(duì)應(yīng) dpi的倍數(shù)。
這種實(shí)現(xiàn)解決了 方案2中1px的問(wèn)題。
- 在不同dpi下，同一個(gè)dom需要不同的px。
- 用sass封裝了 px2rem， px2px來(lái)解決。
- 我們實(shí)際寫(xiě)樣式時(shí)再也不需要計(jì)算了。
方案2的第二個(gè)問(wèn)題也隨之解決。
缺點(diǎn)， 在引入飛flexible的組件時(shí)很痛苦。
總結(jié)
能忍受1px問(wèn)題的情況下，
方案2 ＋ px2rem足以。
追求完美可用方案3
3個(gè)方案與其說(shuō)是解決方案，不如說(shuō)是一個(gè)開(kāi)發(fā)工具。
真正的什么時(shí)候去做自適應(yīng)，什么要用px，什么用rem還是根據(jù)UI的要求和開(kāi)發(fā)的經(jīng)驗(yàn)。
1px問(wèn)題詳解
原來(lái)方案3的1px也有缺點(diǎn)。
