em和rem及视窗理解小记

---

前言

css3中的em 和 rem理解起来是比较头疼的，还是要好好总结一下。结合视窗viewport，做响应式布局的重要知识点

一、em理解

em是个长度单位，是相对的，需要参考的单位，基准值是当前元素的字号大小

1.先做个em总结

1. font-size设置实际值，同作用域其它样式属性使用em 会以此为基准进行计算 乘以 font-size的值
2. font-size设置em值，会继承父元素font-size的值为基准，如果有多级的话，em实际值也会多级继承计算（如果root层html没有设置实际的font-size，默认font-size为16px）
3. font-size设置em值，同作用域其它属性使用em值扔遵循总结1，以font-size em计算完的实际值为基准进行计算（计算完的实际值是关键）

搞清楚这个，就能用好em了，使用em时，要注意嵌套了，多层嵌套还是很容易出问题，针对嵌套可以使用 1em来解决问题
参考链接
https://juejin.im/post/6844903635004948488

二、理解rem

1.rem总结

1. rem = root em 即rem使用全局的body的font-size为基准（如果root层html没有设置实际的font-size，默认font-size为16px）
2. 无论font-size 设置rem还是其它属性设置rem都以body的font-size此为计算基准

2.测试总结

1. 本人之前以为root 层为body，还尝试改变body的font-size结果无效。而动态改变html的font-size是有效的，说明实践出真知
   下面这句话才能有效影响rem值
   document.body.parentNode.style.fontSize = ‘48px’

三、理解viewport

1.视窗总结

1. vw即当前可视窗的宽度1/100
2. vh即当前可视窗的高度1/100
3. vmin 当前可视窗宽高较小的值的1/100
4. vmax 当前可视窗宽高较大的值的1/100

总结

em和rem和可视窗是响应式的基础，尤其是在解决不同分辨率的时候，灵活运用做相对计算，再结合calc()，可以尝试兼容手机平板，电脑，大屏等等。