摘要：移動(dòng)端布局方案匯總原理解析阿里布局版本該布局于年月日被版本取代實(shí)現(xiàn)原理假設(shè)稿寬設(shè)置的將屏幕分成份，實(shí)際屏幕寬度開發(fā)時(shí)直接填寫設(shè)計(jì)稿寬度利用插件轉(zhuǎn)換為實(shí)際阿里布局版本實(shí)現(xiàn)原理利用的理想視口，刪除版本的縮放其他依舊和版本一樣網(wǎng)易布局個(gè)

該布局于 2017年8月9日被2.0版本取代

實(shí)現(xiàn)原理 假設(shè)（UI稿750px寬）

設(shè)置viewport的 scale = 1/window.devicePixelRatio

將屏幕分成10份，font-size = 實(shí)際屏幕寬度 / 10;

開發(fā)時(shí)直接填寫(設(shè)計(jì)稿DOM寬度)px

利用 px2rem插件 轉(zhuǎn)換為 -> 實(shí)際rem

flexible 2.x： https://github.com/amfe/lib-f...

實(shí)現(xiàn)原理

利用viewport的理想視口，刪除1.x版本的scale縮放

其他依舊和1.x版本一樣

個(gè)人很喜歡的布局方案

實(shí)現(xiàn)原理 假設(shè)（UI稿750px寬）

如低版本瀏覽器:

UI稿以font-size = 100px;作為參照，總寬度 = 7.5rem

設(shè)計(jì)稿DOM對(duì)應(yīng)px / 100 = 實(shí)際rem（計(jì)算起來很方便）

其他屏幕按屏幕寬度百分比 縮放 font-size的值

若高版本瀏覽器:

1px/750px ≈ 0.1333333%

按照低版本邏輯：font-size = 0.1333333% * 100 = 13.33333vw

顧名思義，將px轉(zhuǎn)換為vw、vh、vmin、vmax

{
    viewportWidth: 750,
    viewportHeight: 1334,
    unitPrecision: 3,
    viewportUnit: "vw",
    selectorBlackList: [".ignore", ".hairlines"],
    minPixelValue： 1,
    mediaQuery: false
}

文章分享同步于： https://github.com/zhongmeizh...