前言
总是看到em、rem、动态rem，究竟他们的区别是什么呢？
单位
- px：像素
- em：一个 M 的宽度（面试：一个字的宽度）
- rem：root em 根元素（<html>）的 font-size
- vh：view height，视口高度 100vh === 视口高度
- vw：view width，视口宽度 100vw === 视口宽度
由上述可知，rem和em根本没有任何联系。
特别注意的是，浏览器默认 font-size:16px;Chrome浏览器默认最小字号为12px：font-size:12px;所以一般情况下，rem 的font-size不要小于12px;
动态rem
动态rem其实是为移动端适配而诞生的。动态REM思路：动态rem 采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem，之后的布局单位全部使用rem来实现整体缩放。
使用方法
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;} body{font-size:16px;}</style>')
</script>值得注意的是，pageWidth根据实际情况可以适当的缩小（如0.1倍），但是要特别注意缩小后会不会小于浏览器规定的最小字体。在使用动态 rem 布局的移动端页面中，单位可以混用，很小的宽度如border-width 依然使用px，因为即使使用rem，当rem小于1px 时，依然会被浏览器当做1px 使用。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。