從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)都沒有了古程。
但還是有一些細(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的問題晤锥。
- 在不同dpi下掉蔬，同一個(gè)dom需要不同的px。
- 用sass封裝了 px2rem矾瘾， px2px來(lái)解決女轿。
- 我們實(shí)際寫樣式時(shí)再也不需要計(jì)算了。
方案2的第二個(gè)問題也隨之解決壕翩。
缺點(diǎn)蛉迹， 在引入飛flexible的組件時(shí)很痛苦。
總結(jié)
能忍受1px問題的情況下放妈，
方案2 ＋ px2rem足以婿禽。
追求完美可用方案3
3個(gè)方案與其說(shuō)是解決方案赏僧，不如說(shuō)是一個(gè)開發(fā)工具。
真正的什么時(shí)候去做自適應(yīng)扭倾，什么要用px淀零，什么用rem還是根據(jù)UI的要求和開發(fā)的經(jīng)驗(yàn)。
1px問題詳解
原來(lái)方案3的1px也有缺點(diǎn)膛壹。
