移动端布局，为了适配各种大屏手机，目前最好的方案莫过于使用相对单位 rem.
基于rem的原理，我们要做的就是针对不同手机屏幕尺寸，和dpr动态的修改根节点HTML的font-size的大小（基准值）。
这里我们提取一个计算rem的公式：
rem = document.documentElement.clientWidth * dpr / 10；
说明：
1. 乘以dpr ，是因为页面有可能为了实现 1px border 页面会缩放（scale）1/ dpr 倍（如果没有，dpr=1）。
2. 除以 10 ，这纯粹是为了取整，方便计算，这个值可以是任何值，根据个人喜好定。
所以就像，下面这样，HTML的font-size可能会是：
iPhone 3 ： 320px / 10 = 32px;
iPhone 4/5 ：320px * 2 / 10 = 64px;
iPhone 6 : 375px * 2 / 10 = 75px;
对于动态改变根节点的font-size，我们可以通过css做，也可以通过JavaScript做。
css方式，可以通过设备宽度来媒体查询改变HTML的font-size：
html { font-size : 32px; }
//iphone 6
@media( min-device-width : 375px ){
html{ font-size : 64px; }
}
// iphone6 plus
@media( min-device-width : 414px ){
html{ font-size : 75px; }
}
缺点：通过设备宽度 ”范围查询“ ，这样的媒体查询来动态改变rem基准值，其实不够精确，比如：宽度为360px和宽度320px的手机，因为屏宽在同一个范围区间内（<375px）,所以会被等同对待（rem基准值相同），而事实上他们的屏幕宽度并不相等，他们的布局也应该有所不同。最终结论就是：这样的做法，没有做到足够的精确，但是够用。
JavaScript方式，通过上面的公式，计算出基准值rem，然后写入样式
var dpr , rem , scale;
var docEl = document.documentElement;
var fontEl = document.createElement("style");
var metaEl = document.querySelector("mate[name = 'viewport']");
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;
// 设置viewport ，进行缩放，达到高清的效果；
metaEl.setAttribute('content','width=', + dpr * 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 !importment; }';
//给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基准值，缺点就是要加载一段js代码，但是个人觉得这是目前最好的解决方式。
因为这个方案同时解决了三个问题：
1. 1px border 的问题。
2. 图片高清问题。
3. 屏幕适配布局问题。
字体大小问题
既然上面的方案会使得页面缩放（scale），对于页面区域的宽高，我们可以依赖高清视觉稿，因为视觉稿本来就是x2的，我们直接量就可以了，那么对于字体该如何处理那？
对于字体的缩放问题，设计师原本的要求是在任何手机屏幕上字体大小都要统一，所以我们针对不同的dpr直接使用px就可以了。
font-size ： 16px;
[ data-dpr = '2' ] input {
font-size : 32px;
}
字体不可以使用rem，误差太大，且不能满足任何屏幕下文字大小相同。
手淘手机适配参考文章：http://blog.csdn.net/liujie19901217/article/details/51982403
