移动端布局方案汇总&&原理解析

AWang 发布于2019-04-23 11:44 / 2061人阅读

摘要：阿里布局版本阿里布局版本该布局于年月日被版本取代实现原理假设稿宽设置的将屏幕分成份，实际屏幕宽度开发时直接填写设计稿宽度利用插件转换为实际阿里布局版本阿里布局版本实现原理利用的理想视口，删除版本的缩放其他依旧和版本一样

阿里flexible布局 - 版本1.x

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

实现原理 假设（UI稿750px宽）

设置viewport的 scale = 1/window.devicePixelRatio
将屏幕分成10份，font-size = 实际屏幕宽度 / 10;
开发时直接填写(设计稿DOM宽度)px
利用 px2rem插件 转换为 -> 实际rem

阿里flexible布局 - 版本2.x

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

实现原理

利用viewport的理想视口，删除1.x版本的scale缩放
其他依旧和1.x版本一样

网易布局

个人很喜欢的布局方案

实现原理 假设（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转换为vw、vh、vmin、vmax

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

End

文章分享同步于： https://github.com/zhongmeizhi/gitbook-FED

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1079.html

移动端布局方案汇总&amp;&amp;原理解析

摘要：移动端布局方案汇总原理解析阿里布局版本该布局于年月日被版本取代实现原理假设稿宽设置的将屏幕分成份，实际屏幕宽度开发时直接填写设计稿宽度利用插件转换为实际阿里布局版本实现原理利用的理想视口，删除版本的缩放其他依旧和版本一样网易布局个移动端布局方案汇总&&原理解析阿里flexible布局 - 版本1.x 该布局于 2017年8月9日被2.0版本取代实现原理假设（UI稿750px宽）...

cnsworder 2019-08-30 15:56 评论0 收藏0
移动端布局方案汇总&amp;&amp;原理解析

摘要：移动端布局方案汇总原理解析阿里布局版本该布局于年月日被版本取代实现原理假设稿宽设置的将屏幕分成份，实际屏幕宽度开发时直接填写设计稿宽度利用插件转换为实际阿里布局版本实现原理利用的理想视口，删除版本的缩放其他依旧和版本一样网易布局个移动端布局方案汇总&&原理解析阿里flexible布局 - 版本1.x 该布局于 2017年8月9日被2.0版本取代实现原理假设（UI稿750px宽）...

Sanchi 2019-08-23 16:18 评论0 收藏0
移动端布局方案汇总&amp;&amp;原理解析

摘要：移动端布局方案汇总原理解析阿里布局版本该布局于年月日被版本取代实现原理假设稿宽设置的将屏幕分成份，实际屏幕宽度开发时直接填写设计稿宽度利用插件转换为实际阿里布局版本实现原理利用的理想视口，删除版本的缩放其他依旧和版本一样网易布局个移动端布局方案汇总&&原理解析阿里flexible布局 - 版本1.x 该布局于 2017年8月9日被2.0版本取代实现原理假设（UI稿750px宽）...

cucumber 2019-08-02 16:08 评论0 收藏0
前端资源系列（4）-前端学习资源分享&amp;前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0