px em rem 三者的区别
- px是固定的像素，是相对于显示器屏幕分辨率而言的，一旦设置了就无法因为适应页面大小而改变。
为了解决px的问题，提出了em。它是相对于当前对象内文本的字体尺寸，若没有设置行内文本的字体尺寸，则使用浏览器默认字体尺寸，一般为16px。
但em使用起来依旧有诸多不便，复杂的嵌套逻辑使得更改了部分元素会产生字体大小变化的连锁反应。
rem是CSS3新增加的相对单位，即root em，是相较于根元素（html)。rem的根据根节点使得计算更清晰。
- em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局，场景如移动端。em和rem都是由浏览器转换为像素值，具体大小取决于设计中的字体大小设置。
em 和 rem 单位之间的区别是浏览器根据谁来转化成px值，理解这种差异是决定何时使用哪个单元的关键。
em单位如何转换为px
使用em’单位时候像素值是将em×用em单位的元素的字体大小，转换成像素大小取决于在当前元素的字体尺寸
举个例子： 一个div里有18px字体，10em即里面的字体等同于180px
rem单位如何转换为px
转换为像素大小取决于页根元素的字体大小
比如：
根元素字体：16px，10rem=160px
存在的问题与优点
em单位继承的时候，每个元素总是自动继承父元素的字体，继承效果很容易被明确的字体单位覆盖，px，vw等等
rem的优点就很显著，使用rem为元素设定字体大小时，是相对HTML根元素的大小。这个单位可以做到只修改根元素成比例地调整所有字体大小，又能避免字体大小逐层复合连锁关系。
