移动端页面布局

七大布局:流线布局、等比缩放拓展布局、分栏布局、流动布局、重复布局、固定布局

1.流线布局
流线布局指在界面中的内容元素控件在屏幕显示区域内进行相对拉伸,以达到布局完整的目的,比如Pad&Phone横竖屏切换
优点:开发简单、成本低

2.等比缩放
指在界面中元素在相对位置进行等比缩放,从而达到解决横竖屏显示相对较好的UI界面,这种布局不会对界面造成布局重构影响,开发成本低,适配简单,一般使用于音乐、视频、电商、杂志期刊App等领域带有图片宫格布局,界面等比放大后这种大图显示效果比较有视觉冲击力前提是需要足够高清的资源支撑

3.拓展布局
拓展布局定义在屏幕可显示区域类元素增加或者减少,常用于应用商店、音乐、视频、电商等带有宫格布局等场景

4.分栏布局
分栏布局定义界面布局结构发生改变,当然这种布局一般比较复杂,开发需要重构UI框架,一般在横屏及超大PAD上面会使用这样的布局

5.流动布局
界面元素可以根据新的屏幕比例或设备方向在组件内进行流动型布局,界面元素是可以位置发生改变的,这种布局开发成本高,适配有一定难度,但是效果还是不错的

6.重复布局

7.固定布局
固定布局定义界面元素在横竖屏下面,固定使用同一种布局,做法是直接通过竖屏定义规则来适配横屏,开发成本低,效率高

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文旨在总结上周开发的小功能版块中遇到的几个问题。 1.在使用flexbox布局时遇到的问题。 在使用flexbo...
    lavender21阅读 3,764评论 6 13
  • 开头以为移动端的布局就是设备像素低了一点,然后用响应式的@media来设计页面就好了,然而我还是太天真了。开头直接...
    进击的前端阅读 477评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,155评论 25 709
  • 月光又来挨家挨户的 敲窗 今夜的风 廉价的恰好 下酒 且醉一宿 小道 田间 匍匐了一野虔诚的信徒 神佛读了一遍又一...
    何须把酒祝东风阅读 167评论 0 1
  • 亲子阅读30/5 昨天下午带女儿去顺平看桃花,千亩桃花很漂亮很美。我们漫步在桃花之间,仿佛我也变成了桃花在那里争香...
    汐汐妈妈火焰阅读 213评论 0 0