一、首先说一下浏览器解析html文档的原理
当浏览器解析HTML文档时，创建了一个用来代表页面元素的集合，叫做DOM（文档对象模型，Document Object Model）树状结构，每一个节点代表一个元素。<html>就是顶层节点（根节点），在下面的是它的子节点<head>和<body>，再往下就是它们的子节点，还有后代节点，如此类推。根节点是文档里所有其他元素的祖先。它有一个特别的伪类（pseudo-class）选择器（:root），在样式表里可以用这个选择器表示。使用带类名的类型选择器html，或者直接用标签选择器，效果是一样的。
二、再说一下em和rem的区别
rem是根em（root em）的缩写。rem是和根元素关联的，不依赖当前元素。不管你在文档中的什么地方使用这个单位，1.2rem的计算值是相等的，等于1.2倍的根元素的字号大小。下面的示例代码中，声明了根元素的字号大小，并在嵌套的无序列表中使用rem声明字号大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
:root{/*等价于html选择器*/
font-size: 1em;/*使用浏览器的默认字号大小（16px）*/
}
ul{
font-size: 1.6rem;
}
</style>
</head>
<body>
<ul>
<li>示例</li>
</ul>
</body>
</html>在这个示例里，根字号大小是浏览器的默认大小16px（根元素的1em等于浏览器的默认字号大小）。无序列表的字号大小为1.6rem，计算结果是12.8px。因为这只跟根元素相关，尽管你在列表里嵌套了列表，嵌套子列表的字号仍然保持不变。
三、相对长度单位rem的适用性：font-size使用rem
一些浏览器会提供给用户2种方式定制文字的大小：缩放和设置一个默认的字号大小。通过按Ctrl+或者Ctrl-，用户可以对页面进行缩放。这在视觉上会把整个页面的文字或图片（其实是所有元素）都放大或缩小了。在一些浏览器，这个改变只针对当前的标签页且是临时的，不会影响到新开的标签页。
设置默认字号大小，会有点不一样。不仅仅是设置的入口比较难找（一般在浏览器的设置页），而且这个设置是永久的，直到用户把默认值还原。值得注意的是，这个设置对使用px或其他绝对单位定义的字号大小无效。因为默认字号大小对一些用户是必要的，尤其是弱视的群体，你应该用相对单位rem或百分比来定义字号的大小。rem简化了很多em带来的复杂度。事实上，rem提供了一个在px和em间的相对单位折中解决方案，而且更易于使用。