在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多数用户的交互界面，后来逐渐的前端H5开发找到了自己的技术优势，慢慢的后来居上。
前端H5的优势有：
轻松的热更新，（无需等待用户漫长的更新时间）
code once，run anyway，（极大缩短产品的开发时间）
丰富的社区、成熟的技术栈和人才储备
与此同时也面临了许多难题，比如：
性能问题（在低端机型上不够流畅，点击延迟等）
兼容性问题（不仅要适配各种各样的屏幕，还要面对各类厂商对系统浏览器进行篡改引发的兼容性问题）
加载时间
分庭抗礼
至此前端H5和NA开发形成了一种互补的关系，各有自己的适用场景和自己的优劣之处：
H5适合做活动页，运营页，简单的展示页。（支持浏览器的地方就能展示，就能使用）
H5适合做产品最小原型，开发效率快（一份代码跑两个平台）
H5适合还不成熟需要频繁迭代的产品
移动h5开发和桌面web开发有许多不同的地方，一个传统的桌面web开发工程师，如果没有经过一定的学习和尝试无法开发出适应移动web的应用。
那移动开发相较于传统web开发有哪些避无可避的难点呢？接下来我将结合在BANFF项目中的实践来分别介绍这些移动h5开发中的难点以及如何解决这些难点。
难题一：浏览器默认样式
不同系统+不同品牌+不同版本的浏览器都会有各种各样自己的默认样式，很多时候如果忽视浏览器的默认样式会导致显示样式上出现兼容性问题，有的时候可能在某些机型上看上去很好，但是换了一个机型却显示又不正常。
在桌面web时代
前端要适配的浏览器有限（有IE，火狐，chrome，360等）。这个时候我们可以不考虑这些默认的样式，毕竟不一致的地方较少。这个时候可以采用常规的css normall，将各个浏览器的css显示差异控制在一定范围内，这样既能保留平台的特色UI展示，又能避免出现兼容性问题。
移动h5时代
在移动h5上情况就不一样了，手机系统多种多样，浏览器平台数不胜数。如果不严格控制住浏览器的默认样式，显示的兼容性问题就比较严重了。
在BANFF项目中我们对比了 css normal 和 css reset 两种方案，最终采用了css reset 技术，因为在测试过程中我们发现，采用css normal方案去开发移动h5，总会遇到有一些机型的样式无法贴合UE图的效果，所以我们采用css reset将各个平台的css显示差异都抹平，这样就无需考虑浏览器的默认样式了。虽然方法简单粗暴，但是对移动h5开发来说却非常管用。
css reset方案的核心代码
IE下不同版本的默认样式摘要
难题二：屏幕适配
如何适配数不清的屏幕尺寸，曾经是困扰前端开发人员的一大难题。
浏览器占比：
主流的屏幕类型：
看了以上的浏览器占比和主流的屏幕类型就知道屏幕适配对前端开发来说是一个多大的问题了。
在屏幕适配这个问题上，曾今出现了许多优秀的解决方案：
最开始的基于media技术的响应式布局
bootstrap样式库采用了这套适配方案，这套方案的核心思想是将屏幕分为三种类型，搭配上栅格系统，我们能够写出同时兼容移动端小屏幕和pc大屏幕的页面。
移动端适配方案分为几个派别：
固定高度，宽度自适应
这是目前使用较多的方法，垂直方向用定值，水平方向用百分比、定值、flex都行。腾讯、亚马逊、搜狐的首页都是使用的这种方法。
这种方法使用了完美视口：
固定宽度，viewport缩放
这种方案：设计图、页面宽度、viewport width使用一个宽度，浏览器帮我们完成缩放。单位使用px即可。
原理是根据屏幕宽度来动态生成viewport，生成的 viewport 基本是这样：
rem做宽度，viewport缩放
这种方案是目前业界比较认可的一种方案，也是吸取了其他方案的长处再进行改良的一种方案
原理有以下三点：
动态的生成 viewport；
屏幕宽度设置 rem的大小，即给<html>设置font-size；
根据设备像素比（window.devicePixelRatio）给<html>设置data-dpr
rem 适配效果
通过fekey转换来避免手写rem
在BANFF项目中我们比较了以上的几种适配方案
首先响应式布局的解决方案无法实现真正的移动适配，它的适配只能解决pc大屏幕到手机小屏幕的问题，但是手机屏幕任然有很多种，这个时候基于响应式布局的来写页面会发现在Iphone6下看上去和UE效果图一致，但到了iphone5s下按钮之间的间距和UE效果图就差很多，更不用说Iphone4s和其他一众Android机型了
而rem方案能够解决小屏幕的适配问题，因为它的显示单位rem是随着屏幕大小，rem方案比（固定宽度，viewport缩放）来说有优势的地方是可以使用两种不同的单位，想让元素适配的时候就用rem，想让文字不缩放的时候就用px。比如1px的线rem就能轻松搞定，而其他方案不行。比如一些文字我们并不希望它适配，因为部分字体适配后会显示出毛边，这个时候用px能实现不适配的效果。rem的不足之处是我们在书写样式的时候要手动将UE的标注转化成rem。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery