版权声明：本文为博主转载文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/u013558749/article/details/53691396
一. 认识em：
- em是根据文字的大小来的，比如浏览器目前默认字体大小为16px,那么1em = 16px;如果更改了字体大小，那么1em 的值也会变化；
- em如果不设置当前元素的字体大小，会使用继承来的大小；
- 如果设置了自己的字体大小那么单位em的值就会发生变化；
- eg:
1.1. 情况一： 继承字体大小
如上所示，one,two自身没有设定字体大小的情况下，就会使用继承来的字体大小；所以这个时候1em ＝ 16px;
如果要使用em 建议 页面中的 字体尺寸 不要 设置太多;
1.2. 情况二：设置自身字体大小
代码和情况一相比只是给one多加了一个font-size：12px;不过盒子显示的大小就发生变化了，也就是此时1em = 12px;而第二个盒子没有进行设定，因此还是继承来的大小，即1em ＝ 16px;
二. 认识rem
- rem也是根据字体的大小来进行设置的；
- 不过和em不同的是修改元素内部的大小，并不会影响元素的尺寸大小，也就是说如果html中设定font-size: 12px;那么1rem = 12px;
- eg:
2.1. 情况一：没有单独设置元素自身字体大小
此时1rem = 16px;
2.2. 情况二：给元素自身加上字体大小
虽然给元素自身增加了字体大小，但是1rem代表值并不会受影响；
rem的实际应用（目前主要适用于手机端）；
三. 更多
3.1. 了解原理：
3.3.说明
假定我们拿到的是一张宽度为640px的设计图，在这里我们是除以20进行计算，那么在实际中应用的时候（假设测量出来的padding左右值是24px，上下是27px）那么实际写的时候就是padding: 27/32rem 24/32rem;
————————————————
版权声明：本文为CSDN博主「小白变怪兽」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u013558749/article/details/53691396@[TOC]