移動端布局方案匯總&&原理解析

cnsworder 發(fā)布于2019-08-30 15:56 / 1871人閱讀

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

移動端布局方案匯總&&原理解析 阿里flexible布局 - 版本1.x

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

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

設置viewport的 scale = 1/window.devicePixelRatio

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

開發(fā)時直接填寫(設計稿DOM寬度)px

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

阿里flexible布局 - 版本2.x

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

實現(xiàn)原理

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

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

網(wǎng)易布局

個人很喜歡的布局方案

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

如低版本瀏覽器:

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

設計稿DOM對應px / 100 = 實際rem（計算起來很方便）

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

若高版本瀏覽器:

1px/750px ≈ 0.1333333%

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

webpack插件postcss-px-to-viewport

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

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

End

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

返回主頁

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117567.html

移動端布局方案匯總&amp;&amp;原理解析

摘要：移動端布局方案匯總原理解析阿里布局版本該布局于年月日被版本取代實現(xiàn)原理假設稿寬設置的將屏幕分成份，實際屏幕寬度開發(fā)時直接填寫設計稿寬度利用插件轉(zhuǎn)換為實際阿里布局版本實現(xiàn)原理利用的理想視口，刪除版本的縮放其他依舊和版本一樣網(wǎng)易布局個移動端布局方案匯總&&原理解析阿里flexible布局 - 版本1.x 該布局于 2017年8月9日被2.0版本取代實現(xiàn)原理假設（UI稿750px寬）...

Sanchi 2019-08-23 16:18 評論0 收藏0
移動端布局方案匯總&amp;&amp;原理解析

摘要：移動端布局方案匯總原理解析阿里布局版本該布局于年月日被版本取代實現(xiàn)原理假設稿寬設置的將屏幕分成份，實際屏幕寬度開發(fā)時直接填寫設計稿寬度利用插件轉(zhuǎn)換為實際阿里布局版本實現(xiàn)原理利用的理想視口，刪除版本的縮放其他依舊和版本一樣網(wǎng)易布局個移動端布局方案匯總&&原理解析阿里flexible布局 - 版本1.x 該布局于 2017年8月9日被2.0版本取代實現(xiàn)原理假設（UI稿750px寬）...

cucumber 2019-08-02 16:08 評論0 收藏0
移動端布局方案匯總&amp;&amp;原理解析

摘要：阿里布局版本阿里布局版本該布局于年月日被版本取代實現(xiàn)原理假設稿寬設置的將屏幕分成份，實際屏幕寬度開發(fā)時直接填寫設計稿寬度利用插件轉(zhuǎn)換為實際阿里布局版本阿里布局版本實現(xiàn)原理利用的理想視口，刪除版本的縮放其他依舊和版本一樣阿里flexible布局 - 版本1.x 該布局于 2017年8月9日被2.0版本取代實現(xiàn)原理假設（UI稿750px寬）設置viewport的 scale = 1/...

AWang 2019-04-23 11:44 評論0 收藏0
前端資源系列（4）-前端學習資源分享&amp;前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0