rem和em在CSS中有什么不同？
在网站来源，我有时看到开发人员使用rem单位。 这与em相似吗？ 我试图看看它究竟做了什么，但是它是相对的呢？
演示
HTML
<div>Hello <p>World</p></div>
CSS
div { font-size: 1.4rem; } div p { font-size: 1.4rem; }
EM是相对于他们的父母的字体大小
REM是相对于基本字体大小
当中间容器改变字体大小时，这一点很重要。 EM的子元素将受到影响，使用REM的子元素不会。
单位rem （root em）代表根元素的字体大小。 在HTML文档中，根元素是html元素。 浏览器支持仍然有限。
虽然em是相对于其直接或最近的父母的字体大小， REM只是相对于HTML（根）字体大小。
他们提供了控制devise区域的能力。 如在，比较在那个比例的比例。 rem提供了在整个页面上轻松缩放types的function。
这是一个例子。 当我们改变html元素的font-size ，用rem改变大小的divs 。 而使用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>
基本上，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>
