[分享]css中em和rem有什么区别

在CSS中，我们常常会用到em和rem这两个单位。尽管它们的名称相似，但它们之间存在着很大的不同。假设我们现在有一段HTML代码如下： This is a demo of the differenc...

在CSS中，我们常常会用到em和rem这两个单位。尽管它们的名称相似，但它们之间存在着很大的不同。

假设我们现在有一段HTML代码如下：

 <div>
       <p>This is a demo of the difference between em and rem</p>
       <ul>
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
       </ul>
    </div> 

现在我们要通过CSS对这段代码进行样式设置。如果我们想要设置字体大小为1.5倍，我们可以使用em或rem单位来实现。

什么时候该使用em呢？

em是相对于父元素来定义字体大小的。如果我们要将字体大小设置为1.5倍，我们可以使用1.5em：

 <style>
       div {
          font-size: 1.5em;
       }
       li {
          font-size: 0.75em;
       }
    </style> 

上述代码将p标签的字体大小设置为1.5倍，而li标签的字体大小设置为父元素div字体大小的0.75倍。

那么什么是rem呢？

rem同样是定义字体大小的单位，但它是相对于根元素的大小来定义字体大小的。

 <style>
       html {
          font-size: 16px;
       }
       div {
          font-size: 1.5rem;
       }
       li {
          font-size: 0.75rem;
       }
    </style> 

上述代码将根元素html的字体大小设置为16px，将div标签的字体大小设置为1.5倍根元素的字体大小，将li标签的字体大小设置为父元素div字体大小的0.75倍。

需要注意的是，rem不兼容IE8及以下版本。

因此，在日常开发中我们应该根据实际情况来选择em或rem来定义字体大小，在IE8及以下版本中则肯定不能使用rem。em适用于一些结构比较简单的页面，而当页面的结构更为复杂时，rem则会更具优势。