html rem适配

rem和em的区别：
em：设置字体的大小，1em=16px
rem：也可以设置字体大小，但是它是相对于根html的font-size大小来设置的
----------------------------------第一种实现rem适配--------------------------------
设置html的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';

640一般是指设计文稿的宽度，一般设计师都会提供640或者750的宽度；

rem怎么设置：
如果以iphone5s为参考，iphone5s宽度是320，以上计算出来的font-size是50px；
如果一个div在设计图上宽度是160px，那么使用rem就应该是3.2rem
即：160/50 (html font-size) = 3.2rem
最后的css就是：

div{
  width: 3.2rem
}

----------------------------------第二种实现rem适配--------------------------------
浏览器默认字体大小是16px，1rem=16px
设置html的font-size

html{
   font-size: 62.5%; 
}

浏览器默认字体大小是16px，16*62.5%=10px; 默认在pc端解析成12px，因为px的浏览器最小能接受的就是12px；但是在手机端也依然10px;
这个10就是基数，设计稿上100px转换为rem即. 100px/10px = 10rem；

----------------------------------第三种实现rem适配--------------------------------
这种适配方式是看了一个阿里巴巴EDU团队的博客，博客写了很多，仔细看了好几遍也还是有很多懵懵的地方，附上博客地址：http://www.aliued.com/?p=3166

这种方式是通过js动态修改html的viewport的 width和缩放，实现动态适配

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
console.log(docEl.clientWidth);
rem = docEl.clientWidth * dpr / 10;
scale = 1/ dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' +  docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem = function(v) {
    v = parseFloat(v);
    return v / rem;
};
window.dpr = dpr;
window.rem = rem;

计算方式就是：视觉稿的大小/rem；
比如：iphone 5s，实际屏幕宽度是320，在设备通过以上js计算的rem=64；
视觉稿的某个div宽度是100；实际css设置的width就是：100/64
这个方案同时解决了三个问题：
1、border: 1px问题
2、图片高清问题
3、屏幕适配布局问题
----------------------------------第四种实现rem适配--------------------------------
为了方便计算，如果设计图是640，那么我们默认将屏幕分成16份，那么一份就是640/16=40；
如果设计图是750大小，为了方便，可以分成15份，就是一份750/15=50；
按照以上，将html的font-size设置成一份的大小，如：font-size=50px;
那么rem的转换格式100px/50 = 2rem
也有的可以将页面分为100份，那么一份就是7.5或者6.4等等，怎么分都是无所谓。
meta正常如下写就好了，
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi">