对手机端布局的一些理解~~未完待续

前提,由于手机端的特性,灵活,更新快,各种型号,所以就有了以下特点:高度自适应且较PC端轻便简洁。
重点:在写页面时,尤其是移动端页面,尤其要先搞清楚布局再下手。
其中需要注意的一点就是,在基本三大块中,如果要写布局,一定要在其外面嵌套一层盒子,使其与外部的大框架不联系,这样在进行弹性盒变化时不会对其产生影响。(其中支付宝的头部与中部都用到了这个原理,而尾部由于一般是figure布局,其本身就是一个盒子,而底部一般是横向排列,对其影响不大,所以一般不再嵌套一个盒子。)
对于盒子的标签选择一定要合理且易读(信、)。
第一点,手机端页面,一般分为三个部分,既头部、中部、尾部,且其中每一部分都不会 太复杂(与PC端花里胡哨形成鲜明对比),举几个例子吧:
微信从这个微信聊天界面,可以看出其中风格既为简洁为好,只分为头部,中部,尾部。
支付宝支付宝界面的头部与中部看起来较为复杂,其实就是在前面微信聊天界面的基础上增加了两点:
(1)头部又分为了两部分:功能栏和导航栏(要充分利用C3新增标签,尽量避免类名的使用,已达到轻量级的目的。)
(2)中部其实是很多figure结构的重复而已,再使其折行而已,并没有看上去复杂。
小丸子这个页面多了些内容,比如滑动时的固定定位,和这个导航栏的绝对定位。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值