石家庄ui培训销培训
达内石家庄先天下中心

0311-68095557

热门课程

如何把移动页面适配做得更好?

  • 时间:2016-09-13
  • 发布:佚名
  • 来源:互联网

  事实上,移动设备种类之多简直是噩梦一般。所以,实际在设计或者开发过程中,往往只是选择几种设备作为基准来进行设计和开发,而对于其他情况,则采用一些适配策略覆盖。
目前主流的,是以iPhone4的640x960px或者iPhone6 plus的1242x2208px为基准设计,其他设备均采取适配策略。我们先假定设计稿是按640x960px的规范输出,先来跟达内石家庄UI培训看看前端的常用适配方案。
前端适配方案
前端的适配方案大致分为四种:
1,根据meta按比例缩放;
2,根据页面宽度百分比适应;
3,基于媒体查询的响应式方案;
4,REM缩放方案。
1,根据meta按比例缩放
这种方案的实现更偏技术,大致原理是根据设备的分辨率及像素比等信息,计算出页面的缩放(scale)数值,来进行等比缩放。最终的效果就是基于640x960px的设计稿再进行等比缩放,这种实现比较适合某些图片较多的活动页面开发,可以使用设计稿上的绝对像素值进行开发,即设计稿上是200px则CSS代码中的数值也是 200px。
当然,这种方案也有致命的缺点,即脚本计算的结果很难覆盖全部设备,对于一些计算不准确,或者分辨率像素比未知的设备,很容易整个页面异常放大或缩小,直接暴露严重BUG。综上,这种缩放方案可以总结出以下基本特征:
效果:按设计稿等比缩放;
场景:图片较多的活动页面开发;
优点:可以直接按照设计稿像素值开发;
缺点:许多设备无法覆盖,不断填坑。
2,根据页面宽度百分比适应
曾经很长的一段时间,我们都采用百分比适配方案。例如微信购物入口中的京东购物,目前仍然采用这种方案。
这种方案的主要表现就是,在比基准设备(如640x960px)宽的设备上,页面元素的横向宽度是按百分比自适应的,但是高度不会变化。所以,无论遇到什么设备,只需要在宽度上进行兼容即可满足,而文本图片等内容,也可以按照宽度自适应,尽可能充分利用屏幕空间。
而开发时,由于iPhone以及许多Android机都具有高分辨率屏幕,比如iPhone4S的Retina屏幕实际像素点是物理像素的两倍。所以,我们开发时要在640x960px的设计稿尺寸的基础上除以2,比如设计稿上的高度是200px,则CSS中就是height:100px;
关于Retina屏幕的基本知识,建议大家自己查找资料,我只挑重点。
效果:按设计稿尺寸除以2,元素宽度使用百分比实现;
场景:平台型页面,页面布局不是很复杂;
优点:可以适应几乎所有设备;
缺点:横向拉宽会使布局比例失调,且复杂结构百分比实现有难度。
3,基于媒体查询的响应式方案
响应式设计,曾经乃至现在都是非常时髦的概念,不过在实际应用中,响应式设计还是有其相对狭隘的应用场景。一般除了一些创新的小公司,或者某些专题网站之外,很少会用一套代码来适配所有终端。比如PC、Mobile、Pad甚至iWatch 等,全都用一套代码来适配显然是不科学的。
目前普遍的观点是,响应式设计更适合专题页面,或者没有资源来针对各个终端进行单独开发的团队来使用。
响应式设计主要遵循Mobile First,要针对不同设备给出不同设计方案,并设置合适的断点,结合百分比方案,来在不同的设备显示不同的布局。
效果:不同设备表现可能截然不同;
场景:专题网站,小团队低成本开发;
优点:不通设备可以发挥更多的想象力;
缺点:要出多套设计,且内容可能需要取舍。
4,REM缩放方案
REM 方案的原理跟 meta 方案非常相似,只不过是更加粗暴地根据设备的宽度来调整缩放。与 meta 方案不同的是,REM 方案并不是缩放整个页面,而是页面上所有的尺寸都是与根元素(html)的字体大小相关的,我们只是根据不同设备来调整根元素字体大小,则所有尺寸随之变化。
效果:按照设计稿等比缩放;
场景:活动页面及部分平台页面;
优点:开发方便,适应性好;
缺点:等比缩放超大会显得不精致,脚本计算晚页面可能跳动。  达内,遇见就不再错过石家庄ui培训机构,设计是一个美妙的梦想,参加石家庄ui培训,你与梦想的距离只会越来越近,你还在等什么呢?
你想拿高薪嘛?想改变自己的工作现状嘛?快来石家庄达内吧!
石家庄ui培训班--达内为你的前程保驾护航!
【免责声明】部分信息转载自各类纸媒、网媒之所有作品,版权归作者本人所有,转载文章目的在于分享信息、提供阅读,不代表本站赞同其观点和对其真实性负责!若作者或版权人不愿被使用,请即与我方联系,如有侵权本站将迅速给您回应并做处理
上一篇:你应该了解的平面构成中的“面”
下一篇:达内荣膺2016中关村高科技、高成长企业TOP100
选择城市和中心
贵州省

广西省

海南省