关于rem 与 px 换算方案
很多和我一样是新手前端的伙伴一下子对移动端布局的单位很迷茫，首先直接上来干货。
以下是百度网盘地址，里面有一个border.css,一个reset.css文件
https://pan.baidu.com/s/1wP5SUFbFa03JS41lsHdDFQ
先来讲reset.css文件，里面一套为你解决掉了很多初始化的问题，并设置了html的font-size为50px，这样有什么好处呢，一般设计师给你的都是基于iPhone6的二倍图，在这种情况下，直接量出来的px换算关系是100 px=1 rem，比例是1比100
原理：rem就相对浏览器的font-size值（假如默认浏览器font-size为16px，则1 rem= 16px）。由于这里设置了html的font-size为50px，则1rem=50px，而设计师给你的是二倍图，你量出来是100px，实际上是50px，所以就是1rem。
大家在开发之中直接引入这个border.css就可以直接使用了（再去了解一下弹性布局就可以开发简单的移动端小项目啦）
如果要达到比较统一的效果（即是每个rem都是根据屏幕分辨率变化而变化的，可以像下面代码这样，1个rem相当于屏幕宽度的7.5分1，比例可以自己调节，调到自己喜欢的即可），与上面的方案比较，下面的方案可能更加通用，但是在iPad上不能发挥大屏幕的优势，因为基本显示内容的多少和手机基本是一致的（根据屏幕宽度动态调整了尺寸），上面的方案则可以让iPad宽度内容显示更多。
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
if (htmlWidth > 750) {
htmlWidth = 750;
}
htmlDom.style.fontSize = htmlWidth / 7.5 + 'px';
//实际上这位代码在iphone6分辨率上依然设置fontsize为50px，在二倍设计图中，我们依然可以认为1rem=100px（设计图上的100px）关于1px细线解决方案
问题的来源：
一般移动端头部我们在header里面都会加上一句下面的代码，以做成类似app的效果（无法缩放）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这句话定义了本页面宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放
我们都知道，iPhone3gs与iphone4的屏幕分辨率是很不一样的，iPhone4是高分辨率的视网膜屏幕，但是他们理想的viewport宽度都是320px，控制viewport宽度一样的好处是一套css可以适配多个机型。大家想一下，1px在iPhone3gs与iPhone4下面同时展示，iPhone3gs可能css 1px，物理像素就是1px，而iPhone4的高分辨率可能使css 1px，物理像素达2px甚至3px那么长，这就导致css 1px在高分辨机器上出现变粗的情况。
解决问题是第一生产力：
下载网盘里面的border.css，使用方法：比如我要在input框里面加上一个1px底部的边框，我只要在input框的类（class）里面加上“border-bottom”即可，其他用法可以试一下下面列举的所有情况。border,border-top,border-right,border-bottom,border-left,border-topbottom,border-rightleft,border-topleft,border-rightbottom,border-topright,border-bottomleft
关于iOS 0.3s点击延迟
苹果设置300毫秒的延迟是为了系统判断用户是双击还是单击屏幕，有时候我们不需要这样的设定，我们就会使用一个叫做fastclick的工具解决，这个工具使用非常简单，大家知道有这个工具的存在，用的时候在百度上搜一下即可