如果你是刚开始接触移动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。
        以上就是我们在实际开发中积累的一些经验和技巧，希望能够给大家一些帮助。