美文网首页
移动端页面布局

移动端页面布局

作者: Jo_608a | 来源:发表于2017-09-27 16:58 被阅读0次

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

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

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

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

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

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

6.重复布局

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

相关文章

  • 移动端

    app Web App Hybird App 移动端页面 设计图 测试 移动端的设置 移动端的布局 弹性 fl...

  • 移动端布局小问题

    最近写移动端页面的时候遇到的一些小问题, 主要是微信页面 1.布局问题 flex布局,在写这个移动端页面的时候我布...

  • 移动端页面布局

    七大布局:流线布局、等比缩放拓展布局、分栏布局、流动布局、重复布局、固定布局1.流线布局流线布局指在界面中的内容元...

  • 移动端页面布局

    开头以为移动端的布局就是设备像素低了一点,然后用响应式的@media来设计页面就好了,然而我还是太天真了。开头直接...

  • 移动端布局页面

    http://js.jirengu.com/daqap/1/edit?html,css,js,output

  • 移动端页面布局

    移动端app分类 1、Native App 原生app手机应用程序使用原生的语言开发的手机应用,Android系统...

  • 移动端页面布局

    两端固定中间自适应(双飞翼和圣杯布局) 核心:定位和浮动,还有padding和margin的搭配使用 html结构...

  • rem布局

    移动端布局有很多做法,例如流式布局,固定宽度,Media Queries响应式布局,rem。 流式布局:在页面布局...

  • 移动端、PC端屏幕适配

    移动端适配 页面引入ydui.flexible.js页面布局采用rem布局rem计算方式:设计图尺寸px / 10...

  • 移动端 布局技术选型

    单独制作移动端页面(主流) 流式布局(百分比布局)eg:京东 flex布局 (主推)eg:携程网 less + ...

网友评论

      本文标题:移动端页面布局

      本文链接:https://www.haomeiwen.com/subject/fjwuextx.html