rem：相对于根元素缩放，设定根元素的字体大小，在不同屏幕尺寸下，其他元素对应显示不同的字体大小。
em：继承父级的字体大小。
rem的使用：
1）设置根元素的字体大小
浏览器默认的字体大小为16px，跟元素<html>设置 font-size: 62.5%; 相当于页面font-size定义为10px （16px * 62.5% = 10px）；
html {
font-size: 62.5%;
}
此时，换算关系如下：
| px | rem |
|---|---|
| 10px | 1rem |
| 12px | 1.2rem |
| 14px | 1.4rem |
| 16px | 1.6rem |
踩坑：
chrome浏览器默认支持的最小字号是12px;
当html根元素设置 font-size为62.5%（10px）时，在chrome浏览器中，字体1.6rem会等同于16px，但是宽高用rem定义会比16px更大。
因此，兼容chrome浏览器，建议将根目录设置为625%；
html {
font-size: 625%;
}
此时，换算关系如下：
| px | rem |
|---|---|
| 10px | 0.1rem |
| 12px | 0.12rem |
| 14px | 0.14rem |
| 16px | 0.16rem |
也可以根据实际项目需求，自定义根目录字体大小，进行换算。
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
