说起css中的em，大家都会想到rem、vh、vw等（ex、ch是基于字体的单位，本文暂且不提）。个人感觉除了em容易让人误解外，另外三个比较容易，我们把em放到最后。
另外，px为像素单位，是绝对单位，可以直接设置或比较，不受父元素影响。
1.vh和vw
响应式web设计离不开百分比，但CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，怎么办？ 这就是 vh 和 vw 单位为我们提供的。
1vh 等于1/100的视口高度。
如：浏览器高度900px, 1 vh = 800px/100 = 8 px。同理，如果视口宽度未750， 1vw = 700px/100 = 7px。
这样一来可以解决好多问题：
如：用一行代码就可以实现设置高度与视口等高。
.div1 {
height : 100vh;
}
如：设置字体单位为vw，字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和视口大小同步的效果。
2.rem
rem是相对与根元素字体大小来定义的，这并不难理解。当根元素<html>标签设置了固定的字体大小，如：16px，我们使用rem没有任何影响；有时候，根元素没有设置字体，它就会从浏览器继承默认设置的字体大小，一般默认为16px，但是我们同样可以去更改这个值，或者有些浏览器默认值不是16px，就会影响我们的设计效果。
所以，使用rem，最好设置好根元素的字体大小。
3.em
重点理解:
有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3标准 ，它们是相对于使用em单位的元素的字体大小。
父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。
让我们通过实例来看一下：
<html style='font-size:10px'> //设置<html>字体10px
<div class='div1' style='font-size:2em'> //div1字体为20px
<div class='div2' style='padding:1.5em'> //div2 padding为30px
</div>
</div>
</html>
上边这个例子，说div2的em是相对相对于父元素div1字体大小来说看似没什么问题，其实这里div2的字体是通过继承div1得来的。
我们再来看：
<html style='font-size:10px'> //设置<html>字体10px
<div class='div1' style='font-size:2em'> //div1字体为20px
<div class='div2' style='padding:1.5em;font-size:30px'> //div2 padding为45px
</div>
</div>
</html>
现在，我们的padding为45px，即 1.5 x 30 = 45 已经变大了。 它不受父元素的字体大小。
网友评论