你的位置:首页 > 软件开发 > 网页设计 > h5的rem做布局和字体适应就是這么简单又强大,以及我的一些经历

h5的rem做布局和字体适应就是這么简单又强大,以及我的一些经历

发布时间:2016-11-26 16:00:06
这两天要把公司以前的触屏设备的客户端应用h5web应用化,而且有针对不同设备和同一设备下的不同状态(有windows竖屏和横屏和android的),而且都有设计师为其针对的不同设计标准包括字体大小和不同ui组件的大小,虽然当时经过讨论,公司老员工建议就按照這个标准去做,不用考虑自 ...

  这两天要把公司以前的触屏设备的客户端应用h5web应用化,而且有针对不同设备和同一设备下的不同状态(有windows竖屏和横屏和android的),而且都有设计师为其针对的不同设计标准包括字体大小和不同ui组件的大小,虽然当时经过讨论,公司老员工建议就按照這个标准去做,不用考虑自适应,因为设备就这几种,但是我是一直不甘心,总想把他做到扩展性强,以至适配不同设备分辨率,所以来研究這个问题。

  因为在之前的公司做过项目中的某些模块参照过别的产品,发现过有用rem和em的,然后就来网上研究学习了解了下这几种相对单位。其中就找到了这篇文章:http://isux.tencent.com/web-app-rem.html,发现这篇文章对除了rem来设计界面的其他方法做了介绍和总结。文章总结了rem相对于其他几种设计方法的好处,其他几种方法的坏处,具体那些坏处请自行去好好看下这篇文章。

  之所以之前没有去研究学习rem,包括之前没有去研究接受其他的新技术,比如es6,前端mvvm框架、模块化开发、项目自动构建和打包工具等等。是因为在之前的所在公司,公司任务比较充实,每天都有任务要做,那时用的基本都是老技术,单纯的用html,css,jq,js,easyui开发,虽然有点厌倦,写的代码比较low,但还好业务逻辑这方面比较有趣,加上我本身工作责任心强,所以那时每天还算过得充实。充实的结果导致我每天都在做任务,几乎每天晚上7,8点下班回家,然后吃饭,再洗涑,再搞会其他的,基本上就9点过,10点了,然后一天也比较疲倦就经常导致我无心再学习其他新技术,只想休息放松下,那时我周6加班还是比较频繁,然后就基本只有周日了,但是周6由于想睡懒觉和要洗衣服,打游戏,所以学习时间也变得比较少了,总得意思就是学习时间变少了(但是我不是完全不学习,但是那时主要学习js去了,主要就是es5),当然这其中很大原因还是我懒,其实我还是写了好些博客草稿,只不过都因为這个懒的原因没有去整理逻辑发布。。。。。

  但是那段时间还是过得很有价值的,锻炼了我的编程逻辑思维(我是后台出身,所以还是有点编程思维,面向对象的概念,学习js也不是那么吃力。在学校学习了一年C#.NET,然后当初应聘的第一份工作是.net,但是公司框架已成熟,对前端需求大,我就去做了前端,然后爱上了前端,但是公司的几个简单常用的小接口还是我写的,虽然借鉴了些百度,但是还是有自己的东西,比如自己在只上传文件的接口中扩展了对图片base64的解析保存,当时绝对不是抄的别个的。到了现在的公司,由于公司需要,我也会偶尔负责后端开发,比如公司现在的一个小型cms,我独立开发,完全独立开发,从数据库到c#.net的数据层,中间层,业务层(后台用三层架构,没用mvc),通用的数据接口和比较常用的接口都是自己写的,没有用第三方框架。当然我的C#.NET还是只是皮毛,数据库设计也是会相对比较简单的的东西,表创建和视图自己写,存储过程用的别个现成的稍微改了一点点,当然我主要喜欢前端,以后也会一直向前端发展,后台我只需要懂点皮毛就可以了,有后台那个概念就OK。)。因为业务逻辑复杂好玩,任务多,当业务逻辑多到我觉得我的代码是垃圾,不堪入目,当时一直没有好的方法去解决这些痛点。现在深深的体会解决这些痛点的这些新技术带来的**,爽,深深的体会到mvvm设计模式很适合web前端(這里我很推崇vue,相对其他框架来说,它做模块化开发,开发大型应用会比较简单,环境搭建也很简单,有官方的脚手架工具vue-cli)。

  到了现在的一家公司,由于公司的任务不是那么多,时间也比较足,所以我在空闲时间会去研究怎么让我的代码更简洁、更具可读性,更抽象、更高效的去实现功能业务需求,让项目模块具有可扩展,可复用,可变更,高内聚低耦合等等。然后就是嘿嘿嘿~,不断的一层一层的深入了解,发现惊喜越来越多,实际上发现这些技术也没有想象种那么难,很简单。

  回归正题,我以前做界面就是上面那篇文章里提到的流式布局(主要用bootstrap栅格布局),宽度高分比,高度固定(最开始我高度也百分比,显然不行),这种方式的坏处就是兼容性不是很好,不好维护。下面我就来介绍下最终我觉得很好的rem。

  

  下面面这是引用知乎的一位用户的回答:https://www.zhihu.com/question/21504656

原标题:h5的rem做布局和字体适应就是這么简单又强大,以及我的一些经历

关键词:H5

H5
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。