em

相對單位：相對于父元素的 font-size桶雀；

<div>
    <p></p>
</div>

<style>
    div{
        font-size: 14px;
    }
    p{
        width: 1em;     /*實際寬度 14px。 多少em昼窗，就是父元素的font-size多少倍 */
        height: 1em;   /* 實際高度 14px */
        background-color: black;
    }
</style>

rem

相對單位：是根據(jù)html根元素的font-size；

可以理解為是html的font-size的多少倍數(shù)， 1rem就是一倍简僧，2rem就是兩倍 -- 也就是說只需要通過控制html的font-size就可以改變頁面中元素的大小雕欺；
注意： rem只適用于固定尺寸岛马； 該使用 百分比 or flex布局的地方正常使用百分比 or flex來布局

<style>
    html {
        font-size: 14px;
    }
    p{
        width: 2rem;      /*實際寬度 28px棉姐。 多少rem，就是html的font-size多少倍 */
        height: 2rem;
        background-color: orange;
    }
</style>

rem適配方案

• 1.按照設(shè)計稿與設(shè)備寬度的比例啦逆，動態(tài)計算并設(shè)置html的font-size伞矩；
• 2.設(shè)計稿元素的寬，高的取值夏志，按照同等比例換算為rem單位的值乃坤；

如常見尺寸iphone6/7/8/x: 邏輯像素寬度375px，iphone6/7/8Plus: 邏輯像素寬度414px沟蔑；

• 1. 如設(shè)計稿750px（css像素的兩倍）
• 2. 我們把屏幕劃分為15等份（也可以是10,20份）,每份作為html字體大小;
• 3. 在750px設(shè)備的時候湿诊，html字體大小：750/15 = 50px;
     ? ?在320px設(shè)備的時候瘦材，html字體大刑搿：320/15 = 21.33px;
• 4. div設(shè)計稿中寬100px，高100px食棕，rem取值就是:100px / 50px = 2rem; 因此代碼中應(yīng)該寫: div{ width:2rem; height:2rem }

    <style>
        /*默認 pc端打開時,限定為(50px*15rem<body.width)750px朗和。需在最上面 */
        html{   font-size: 50px;  }

        @media screen and (min-width: 320px){
            html{   font-size: 21.333px;  }
        }
        @media screen and (min-width: 360px){
            html{   font-size: 24px;  }
        }
        @media screen and (min-width: 375px){
            html{   font-size: 25px;  }
        }
        @media screen and (min-width: 400px){
            html{   font-size: 26.666px;  }
        }
        @media screen and (min-width: 414px){
            html{   font-size: 27.6px;  }
        }
        @media screen and (min-width: 424px){
            html{   font-size: 28.266px;  }
        }
        @media screen and (min-width: 480px){
            html{   font-size: 32px;  }
        }
        @media screen and (min-width: 540px){
            html{   font-size: 36px;  }
        }
        @media screen and (min-width: 720px){
            html{   font-size: 48px;  }
        }
        @media screen and (min-width: 750px){
            html{   font-size: 50px;   }
        }

        /* 原本應(yīng)該這樣寫
          body{    
            margin: 0 auto;
            min-width: 320px;
            max-width: 750px;
            width:15rem;
          }
        */
        body{
            margin: 0 auto;
            min-width: 320px;
            width: 15rem;  /* 為什么不設(shè)置max-width? */
            /* because: 50px(html默認font-size) * 15(rem) = 750px；也就是最大寬度*/
            /*當(dāng)320屏幕 21.33(font-size)*15(rem)=320px,會自動縮放 */
            /*當(dāng)375屏幕 25(font-size)*15(rem)=375px, 會自動縮放 */
            min-height:100vh;
        }


        /* 設(shè)置某個盒子寬度*/
        div{
            width: 2rem;
            height: 2rem;
            background: orange;
        }
    </style>

媒體查詢設(shè)備屏幕大于等于750px時簿晓，div寬高為100px

媒體查詢設(shè)備屏幕在320px-749px之間時, div寬高為42.66px

• 5. 總結(jié)：元素rem取值 = 元素在750設(shè)計稿的px值 除以 html的font-size;

ps： 一般由設(shè)計師按照設(shè)備像素/物理像素(750px)為單位制作設(shè)計稿例隆。但也有直接用邏輯像素提供(375px,此時只需要*2即可)

像素知識參考: http://www.reibang.com/p/af6dad66e49a