如何让页面中的各种尺寸自适应
需求：设计搞的尺寸需要在各种屏幕上等比缩放
我们需要找到一种单位 a ，它能和设计稿的尺寸对应起来，比如：1a = 设计稿100px
css3 中的 rem 单位，表示相对于网页根元素的字体大小。
如果能保证根元素的字体大小始终等于设计稿中的100px，则rem就是要找的单位a。

如：

设计稿宽度     
 设备视口宽度   
  根元素字体大小  
700
 700
 100px
700
 350 50px
800 600 75px
750 375 50px
根元素字体大小 = 设备视口宽度 / 设计稿宽度 * 100 
function setFont(){
    var html = document.documentElement;//根元素
    var designWidth = 800;//设计稿宽度
    //html.clientWidth:视口宽度
    //clientWidth = width(样式中设置的)+左padding+右padding - 垂直滚动条宽度。
    //offsetWidth=width(样式中设置的)+左右padding+左右border
    html.style.fontSize = (html.clientWidth / designWidth) * 100 + "px";//设置字体大写
}
setFont();
//设备尺寸变化时，重新设置根元素字体大小
window.onresize = setFont;

//注意：为了避免污染全局变量，可以把这整个函数放到立即函数里面