多屏幕适配布局问题

移动端布局，为了适配各种大屏手机，目前最好的方案莫过于使用相对单位  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://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041

手淘手机适配参考文章：http://blog.csdn.net/liujie19901217/article/details/51982403