移动端rem布局方案

利用淘宝中的方案：

em是CSS3新增的一个相对单位（root em，根em）。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

viewport部分：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

1. width:控制viewport的宽度，可以指定一个值(数字)，也可以是device-width代表设备的宽度(单位为缩放为100%时的css的像素)
2. height: 控制viewport的高度，
3. initial-scale:初始缩放比例，也即是当页面第一次load的时候缩放比例
4. maximum-scale:允许用户缩放到的最大比例
5. minimum-scale:允许用户缩放到到最小比例
6. user-scalable:用户是否可以手动缩放

js部分：

(function (win){
        if (!win.addEventListener) return;
        	var html=document.documentElement;
        function setFont()
        {
	          var cliWidth=html.clientWidth;//设备的宽度
	          html.style.fontSize=cliWidth/10+'px'；//根据设备的宽度设置html的font-size,除以10，为了方便计算
        }
        win.addEventListener('resize',setFont,false);
        setFont();
      })(window);

那么如果以设计稿740来计算的话，在iphone6的设备上(375 x 667)，html的font-size=37.5px;
如果量取设计稿上的某一元素的宽为100px；那么在此宽为：100/2/37.5=1.33333333rem;
除以2是因为设计稿的宽度是设备宽度的2倍.
注意：
移动端的font-size：最小为8px；所以在设置的时候html的font-size最小不能小于8px,