rem與em在CSS中的區別是什麼？

Question

在網站源碼中，我有時看到開發者使用rem單元。它是否與em相似？我試圖看看它究竟做了什麼，但它與它有什麼關係？

Demo

HTML

<div>Hello <p>World</p></div> 

CSS

div { 
    font-size: 1.4rem; 
} 

div p { 
    font-size: 1.4rem; 
} 

Answer 1

EM s爲相對於他們的父母的字體大小

REM s爲相對於基本字體大小

當中間容器更改字體大小時，這很重要。 EMs的子元素將受到影響，使用REM的子元素不會。

Answer 2

The unit rem（root em）代表根元素的字體大小。在HTML文檔中，根元素是html元素。瀏覽器支持仍然有限。

Answer 3

雖然EM是相對於它的直接的或最近的父的字體大小，REM是僅相對於該HTML（根）字體大小。

em給出了控制設計區域的能力。如在中，相對比例在該特定區域中縮放。 rem可以輕鬆地在整個頁面上縮放類型。

Answer 4

這裏是一個例子。 divs尺寸爲rem，因爲我們更改html元素的font-size。而那些尺寸爲em的尺寸僅在我們更改div的font-size時發生變化。

$(function() { 
 
    var htmlSize = $('input#html'); 
 
    htmlSize.change(function() { 
 
    $('html').css('font-size', htmlSize.val() + 'px'); 
 
    }); 
 

 
    var divSize = $('input#div'); 
 
    divSize.change(function() { 
 
    $('div').css('font-size', divSize.val() + 'px'); 
 
    }); 
 
});

* { 
 
    float: left; 
 
    font-size: 20px; 
 
    margin:2px; 
 
} 
 
label { 
 
    clear:both; 
 
} 
 
div { 
 
    border: thin solid black; 
 
} 
 
div.rem1 { 
 
    width:4rem; 
 
    height: 4rem; 
 
    clear: both; 
 
} 
 
div.rem2 { 
 
    width: 3rem; 
 
    height: 3rem; 
 
} 
 
div.em1 { 
 
    width: 4em; 
 
    height: 4em; 
 
    clear: both; 
 
} 
 
div.em2 { 
 
    width: 3em; 
 
    height: 3em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Change html font-size 
 
    <input id="html" type='number' value="20" min="18" max="30" /> 
 
</label> 
 
<div class="rem rem1">rem</div> 
 
<div class="rem rem2">rem</div> 
 
<label>Change div font-size 
 
    <input id="div" type='number' value="20" min="18" max="30" /> 
 
</label> 
 
<div class="em em1">em</div> 
 
<div class="em em2">em</div>

Answer 5

基本上EM是相對於CSS最近的父，而相對於這通常是HTML標籤頁的父...

你看到區別顯然，如果你運行下面的CSS和如何父是影響它：

html { 
 
    font-size: 16px; 
 
} 
 

 
.lg-font { 
 
    font-size: 30px; 
 
} 
 

 
p.rem { 
 
    font-size: 1rem; 
 
} 
 

 
p.em { 
 
    font-size: 1em; 
 
}

<div class="lg-font"> 
 
    <p class="em">Hello World - em</p> 
 
</div> 
 

 
<div class="lg-font"> 
 
    <p class="rem">Hello World - rem</p> 
 
</div>