移动web端之前端转型摘要

 发表于 2015-03-05

        如果你是刚开始接触移动web开发的前端工程师,那你也许会遇到很多我曾经遇到过的问题,也许有很多名词和概念,你经常看到或听说,今天就让我们来探索移动web端开发的奥妙。
        首先,我们要区分三点概念。
        移动web开发跟web前端差别不大,因为主要开发对象是IOS和Android系统的手持设备,所以不需要再去兼容IE和一些2B浏览器的兼容性,在这里是webkit的天下,可以理解成是pc网页的缩小版加了一些触摸特性,当然不同版本的Android还有不同浏览器还是存在一定的差别的。
        web app开发特指的是用HTML5开发,因为他很接近客户端应用程序的用户体验,可以和系统深度融合,调用一些只有客户端才能调用的功能。(比如访问电话、摄像头等本地功能)
        而native app就是特指的开发Android的Java和开发iOS的Objective-C。
        综合而言,移动web开发利用的是基于浏览器的网页语言技术,native app开发利用的是基于操作系统的程序语言技术,web app介于两者之间.当然现在比较流行混合型app。
        1、首先是您可能已经听过的响应式布局,其实响应式web设计并非新的技术,只是将弹性布局、弹性图片和媒体查询等已有的开发技巧整合在了一起,其中媒体查询,link标签的media属性到如今的css3又逐渐的更加丰富,下面列了一部分供大家参考(参考自http://www.w3.org/html/ig/zh/wiki/CSS3媒体查询)。已经丰富的页面Meta,其中定义了IOS允许全屏、顶端状态条样式、禁止判断为电话号码保存到桌面图标,以及允许缩放比例等丰富的属性。另外在样式中的应用,我们可以基本舍弃ldpi了。
        /*中分辨率屏幕*/
        @media(-webkit-min-device-pixel-ratio:1){css代码}
        /*高分辨率屏幕*/
        @media(-webkit-min-device-pixel-ratio:1.5){css代码}
        /*超高分辨率屏幕(传说中的Retina屏)*/
        @media(-webkit-min-device-pixel-ratio:2){css代码}
        上面就是在css中的用法,把我们需要的css代码包含在大括号中就能用了,是不是很方便的样子。当然我们还可以用到几个特性,如下:
        @media screen and (max-width:768){css代码}
        针对视口宽度不大于768像素的情况加载大括号中的样式。
        2、百分百布局,当我们拿到设计师的设计稿之后(一般为640或720),按照设计稿的2/1或者3/1来百分比布局即可,此时便会用到css3的box-sizing等最新属性,其中display:-webkit-box、渐变、阴影、2D3D等更是简单粗暴,如果你没用过,相信你会很快爱上它,甚至于ico我们也可以使用字体图标,因为大多数手机浏览器是都支持HTML5和CSS3的。
        3、字级单位,如果你还只知道用px、em那你out了,用下rem吧,我们之前用em、百分比的时候,经常因为嵌套的层级太多而难以把控,而用px则被固定死了,现在我们用rem完全不用担心这个问题,因为rem的参照对象只有根节点。我们只需设置根节点的大小,所有子节点都只需参照它来设计就可以。
        4、新增的标签和选择符,HTML5新增标签让我们的结构更加语义化,而新的伪类选择符和伪对象选择符,可以让你减少很多不必要的代码,这里就不细说了。
        5、关于PPI/DPI的了解,我们计算PPI就是为了知道一部手机设备是属于哪个密度区间的,因为不同的密度区间,对应着不同的默认缩放比例,这是一个很重要的概念。这里我们就会用到viewport。
        以上就是我们在实际开发中积累的一些经验和技巧,希望能够给大家一些帮助。

评论 移动web端之前端转型摘要

版权所有,未经许可,请勿转载,违者追究法律责任