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