移动开发时代，代表绝对长度的 px 很难满足不同设备下不同分辨率的开发。
例如：
单纯 iphone 的分辨率已经让人眼花缭乱了，更不提机海般的安卓设备。
再实现 px 转 rem 之前，需要先了解一些基本的长度单位：
页面按照像素精确展示，不会因为其真实物理尺寸的变化而改变。
首先介绍最重要的 px:
- px, pixel, 1px 是一个像素点（相对于屏幕分辨率）。
例如：
随后看物理单位在 css 中的映射:
- in, inch, 英寸为物理单位，但是在 css 中，被映射成像素，并被定义为 1in = 96px.
| 绝对长度单位 | 转坏为 px |
|---|---|
| cm | 1cm = 37.8px |
| mm | 1mm = 3.78px |
| pt | 1pt = 1/72in = 96/72px |
| pc | 1pc = 12pt |
- em: 1em 表示当前元素的
font-size的计算值。 - rem: 1rem 表示根元素的
font-size的大小。若 rem 用在 根元素 上时，则表示初始值。
例如：
<head>
<style>
div {
font-size: 24px;
}
.p1 {
font-size: 1rem; /* 16px */
}
.p2 {
font-size: 1em; /* 24px */
}
</style>
</head>
<body>
<div>
<p class="p1">
hello
</p>
<p class="p2">
world
</p>
</div>
</body>效果为：
- vh: 1vh 为视窗高度的 1%.
- vw: 1vw 为视窗宽度的 1%.
- vmin: min(vh, vw).
- vmax: max(vh, vw).
- %: 占据父元素的百分比。
- fr: grid 布局中的长度单位。
再次明确一个概念： rem 相对的是根元素 <html> 的 font-size 的值。
因此： n px = n / [html.font-size] rem.
在项目中，可以一直使用 px 进行开发，最终在打包阶段，使用诸如 postcss 等库来实现转换。