在CSS中,我们常常会用到em和rem这两个单位。尽管它们的名称相似,但它们之间存在着很大的不同。假设我们现在有一段HTML代码如下: <div> <p&am
在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则会更具优势。
粉丝
0
关注
0
收藏
0