CSS單位中px、em和rem的區別&js實現rem單位換算

1. CSS單位中絕對長度與相對長度
2. px介紹與優缺點
3. em介紹與優缺點
4. rem介紹與優缺點
5. 總結

CSS單位中絕對長度與相對長度

css單位中分為相對長度單位、絕對長度單位。

絕對長度：cm、mm、in、px、pt、pc

相對長度：em、ex、ch、rem、vw、vh、vmin、vmax、%

瀏覽器對各單位的支持情況：

平時我們常用的單位主要是rem、em和px，為了便於區分它們的使用場景，我們在此進行詳細的講解。

px介紹與優缺點

px，像素（Pixel），是絕對長度單位，會繼承上級標簽元素的大小。也有說px是相對長度單位，這是因為像素px是相對於顯示器屏幕分辨率而言的，在縮放頁面時無法調整那些使用它作為單位的字體、按鈕等的大小，但兼容性較好。

一般電腦的分辨率有{1024768}，{1280768}，{1920*1024}等不同的分辨率。1920*1024 前者是屏幕寬度總共有1920個像素寬度后者則是高度為1024個像素。

我們可以換種簡單的方法來記憶就是：

相對：相對於devicePixelRatio，px實際顯示的大小是不確定的。
絕對：相比於em，px的大小和元素的其他屬性無關。

em介紹與優缺點

em是相對長度單位，是指相對於當前對象內文本的字體尺寸。如果當前相對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸16px，為1em=16px。

em 的值並不是固定的，會繼承父級元素的字體大小，代表倍數；

瀏覽器的默認字體都是16px，那么1em=16px，以此類推計算12px=0.75em，10px=0.625em，2em=32px；

這樣使用很復雜，很難很好的與px進行對應,也導致書寫、使用、視覺的復雜(0.75em、0.625em全是小數點)；

為了簡化font-size的換算，我們在body中寫入以下代碼:

body {
  font-size: 62.5%;   /*  公式16px*62.5%=10px  */    
}

rem介紹與優缺點

rem是css3中新增加的單位，相對的只是HTML根元素，瀏覽器的默認字體尺寸也是16px。

通過它，只修改根元素就可以成比例地調整所有字體大小，同時可以避免字體大小逐層復合的連鎖反應。

為了簡化font-size的換算，我們在body中也可以寫入以下代碼:

body {
  font-size: 62.5%;   /*  公式16px*62.5%=10px  */    
}

em與rem區別:

em是根據父元素繼承相應大小而不是固定的，rem是繼承html根元素的大小，只有改變根元素html的值才能改變rem的值。

下面舉例說明：

<div class="size0">
        <h3>1、這是size0一個三級標題，類size0下字體大小為瀏覽器默認大小16px</h3>
        <p>這是size0第一個段落標簽,字體大小為瀏覽器默認16px</p>
        <p>這是size0第二個段落標簽字體大小設置為12px</p>
        <p>這是size0第三個段落標簽字體大小設置為1em=16px</p>
        <p>這是size0第四個段落標簽字體大小設置為1rem=16px</p>
        <div class="size1">
            <h3>2、這是size0子類size1一個三級標題，類size1下字體大小設置為20px</h3>
            <p>這是size0子類size1第一個段落標簽字體大小繼承父類size1為20px</p>
            <p>這是size0子類size1第二個段落標簽字體大小設置為16px</p>
            <p>這是size0子類size1第三個段落標簽字體大小設置為1em=20px(相對於上級標簽元素，繼承父類)</p>
            <p>這是size0子類size1第四個段落標簽字體大小設置為1rem=16px(相對於根標簽元素，繼承根元素)</p>
        </div>
</div>

.size0 :nth-child(3){
    font-size:12px;
}
.size0 :nth-child(4){
     font-size:1em;
}
.size0 :nth-child(5){
     font-size:1rem;
}
.size1{
     font-size:20px;
}
.size1 :nth-child(3){
     font-size:16px;
}
.size1 :nth-child(4){
     font-size:1em;
}
.size1 :nth-child(5){
     font-size:1rem;
}

顯示如下：

添加 body {font-size: 62.5%; } /* 公式16px*62.5%=10px */ 簡化font-size的換算：

<div class="size0">
    <h3>1、這是size0一個三級標題，類size0下字體大小為瀏覽器默認大小16px</h3>
    <p>這是size0第一個段落標簽,字體大小為瀏覽器默認16px</p>
    <p>這是size0第二個段落標簽字體大小設置為12px</p>
    <p>這是size0第三個段落標簽字體大小設置為1em=16px</p>
    <p>這是size0第四個段落標簽字體大小設置為1rem=16px</p>
    <div class="size2">
        <h3>這是size0子類size2一個三級標題，類size2下加入font-size:62.5%后字體大小設置為1em=1rem=10px</h3>
        <p>這是size0子類size2第一個段落標簽字體大小繼承父類size1為10px</p>
        <p>這是size0子類size2第二個段落標簽字體大小設置為16px</p>
        <p>這是size0子類size2第三個段落標簽字體大小設置為1em=10px(相對於上級標簽元素，繼承父類)</p>
        <p>這是size0子類size2第四個段落標簽字體大小設置為1rem=16px(相對於根標簽元素)</p>
    </div>
</div>

.size2{
    font-size: 62.5%;   /*  公式16px*62.5%=10px  */ 
}
.size2 :nth-child(3){
     font-size:16px;
}
.size2 :nth-child(4){
    font-size:1em;
 }
.size2 :nth-child(5){
    font-size:1rem;
}

顯示如下：

通過對比，可以更清楚地了解px、em與rem的區別，可以給body設置 body {font-size: 62.5%; } /* 公式16px*62.5%=10px */進一步觀察字體大小變化，相信這個時候你已經可以理解為什么變化了。

總結

給html設置一個font-size:62.5%，使得1rem=10px，仍有可能會出現一些bug，給大家分享一個rem的JS封裝插件。

 1 /*手機自適應*/
 2 (function (doc, win) {
 3   var docEl = doc.documentElement,//根元素html
 4   resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
     //判斷窗口有沒有orientationchange這個方法，有就賦值給一個變量，沒有就返回resize方法。
 5   recalc = function () {
 6     var clientWidth = docEl.clientWidth;
 7     if (!clientWidth) return;
 8     // if(clientWidth>=560){
 9     // clientWidth=560;//把document的fontSize大小設置成跟窗口成一定比例的大小，從而實現響應式效果。 
11     // }
12     docEl.style.fontSize = 10 * (clientWidth / 750) + 'px'; }; //倍數關系可以修改，此處為10
13     if (!doc.addEventListener) return;
14     recalc();
15     win.addEventListener(resizeEvt, recalc, false); 
16     //addEventListener事件方法接收三個參數：
17     //第一個是事件名稱比如點擊事件onclick，第二個是要執行的函數，第三個是布爾
18     doc.addEventListener('DOMContentLoaded', recalc, false);//綁定瀏覽器縮放與加載時間
19 })(document, window);

此時1rem=10px；

比如一般ios設計比例為750*1334，我們可以設置width:75rem，寬度就是750px；字體大小如設計稿上標明28px，則可以設置font-size:2.8rem；

隨着你的手機不通寬度不同，他會相對的改變你的html根元素的大小，這時也就形成了響應式移動端，手機比例越大寬度越大，字體越大，這樣就將一張頁面實現不同的寬高與大小。