rem&emrem相对于根元素的比值em元素字体相对于根元素计算，其他属性根据元素本身字体计算的比值em现在已经很少使用

rem 相对于根元素的比值
em 元素字体相对于根元素计算，其他属性根据元素本身字体计算的比值

<style>
    html{
        /*1rem*/
        font-size: 16px;
    }
    .div1{
        width: 320px;   //20rem
        height: 20rem;  //320px
        font-size: 1em; //16px
    }
    .div2{
        font-size: 2em; //32px
        width: 20em;    //640px
        height: 20em;   //640px
    }
< /style>

em现在已经很少使用
示例：

rem.js //监听横竖屏切换事件，自适应更改元素大小

(function(doc,win){
    var dcoEl =doc.documentElement,//获取html元素
    //orientationChange 移动端safari浏览器支持 切换横竖屏事件
    resizeEvt = 'orientationChange' in window ? 'orientationChange' : 'resize'
    recalc =function(){
        // document.documentElement.clientWidth 浏览器窗口文档显示区域的宽度，不包括滚动条
        var clientWidth = dcoEl.clientWidth;
        if(!clientWidth)return;
        if(clientWidth>540){
            clientWidth=540;
        }
        //以iphone6为基准 body 100px rem=size/100 红包页面以iPhone6为基准
        dcoEl.style.fontSize = 100 * (clientWidth/750) +'px';
    };
    if(!doc.addEventListener)return;
    win.addEventListener(resizeEvt,recalc,false);
    //DomContentLoaded dom内容加载完成
    doc.addEventListener('DomContentLoaded',recalc,false);
})(document,window);