您的位置：首页 > 其它

em和rem的理解

2017-07-15 20:04 127 查看

之前对于这个内容有点模糊，现在总结一下。

em是根据父类的大小调整，根据代码举例说明

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
font-size: 100%;
}
#parent{
font-size: 1.1em;
}
#child{
font-size: 2em;
}
#div2{
font-size: 2em;
}
</style>
</head>
<body>
<div id="parent">
parent
<div id="child">child</div>
</div>
<div id="div2">div2</div>
</body>
</html>我们设置body的字体为100%，也就是默认字体16px

parent的字体大小为1.1em，也就是默认字体的1.1倍大小
div2的字体大小为2em，也就是默认字体的2倍大小

对于child的字体大小，当然不是默认字体的2倍大小。因为em只是根据自己的父类调整，并不是祖先类。所以child的字体大小为父类的两倍，也就是2.2em。也就是默认字体的2.2倍大小。效果图如下：

由于em根据父类的特征，许多程序开发人员觉得很麻烦，所以就引入了rem。rem是始终相对于body。也就是写2rem，不管父类是多少，都是默认字体的两倍大小。

既然rem怎么好，按照道理em应该被淘汰了啊，可是为什么仍然存在呢？主要原因是因为曾经的ie7和ie8不支持rem。不过现在可以大胆的使用rem了，再也不用担心父类的字体大小是多少了。

其实当时为了解决ie不支持的问题，有大神也写过一些脚本，只是不愿意为了这么一点问题，让页面多加载一个脚本

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： rem em

相关文章推荐

新的分享

章节导航