简单对比em和rem

 

一、首先说一下浏览器解析html文档的原理

当浏览器解析HTML文档时，创建了一个用来代表页面元素的集合，叫做DOM（文档对象模型，Document Object Model）树状结构，每一个节点代表一个元素。就是顶层节点（根节点），在下面的是它的子节点和，再往下就是它们的子节点，还有后代节点，如此类推。根节点是文档里所有其他元素的祖先。它有一个特别的伪类（pseudo-class）选择器（:root），在样式表里可以用这个选择器表示。使用带类名的类型选择器html，或者直接用标签选择器，效果是一样的。

 

二、再说一下em和rem的区别

rem是根em（root em）的缩写。rem是和根元素关联的，不依赖当前元素。不管你在文档中的什么地方使用这个单位，1.2rem的计算值是相等的，等于1.2倍的根元素的字号大小。下面的示例代码中，声明了根元素的字号大小，并在嵌套的无序列表中使用rem声明字号大小。

    
    
    


    

        
示例
    

在这个示例里，根字号大小是浏览器的默认大小16px（根元素的1em等于浏览器的默认字号大小）。无序列表的字号大小为1.6rem，计算结果是12.8px。因为这只跟根元素相关，尽管你在列表里嵌套了列表，嵌套子列表的字号仍然保持不变。

 

三、相对长度单位rem的适用性：font-size使用rem

一些浏览器会提供给用户2种方式定制文字的大小：缩放和设置一个默认的字号大小。通过按Ctrl+或者Ctrl-，用户可以对页面进行缩放。这在视觉上会把整个页面的文字或图片（其实是所有元素）都放大或缩小了。在一些浏览器，这个改变只针对当前的标签页且是临时的，不会影响到新开的标签页。

设置默认字号大小，会有点不一样。不仅仅是设置的入口比较难找（一般在浏览器的设置页），而且这个设置是永久的，直到用户把默认值还原。值得注意的是，这个设置对使用px或其他绝对单位定义的字号大小无效。因为默认字号大小对一些用户是必要的，尤其是弱视的群体，你应该用相对单位rem或百分比来定义字号的大小。rem简化了很多em带来的复杂度。事实上，rem提供了一个在px和em间的相对单位折中解决方案，而且更易于使用。