你不知道的em

作者: zh_yang | 来源:发表于2017-08-04 18:27 被阅读0次

你不知道的em
转发
喜欢
2016.
英才招募中
人工智能与围棋和人类发展
每日一句
我对自己说一声～你辛苦了！
俊境娱乐
小王子

说起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 已经变大了。它不受父元素的字体大小。