起因
在对自己掌握的 css 知识进行梳理的时候，进行到移动端适配的模块时，对 rem 这个单位产生了好奇，不明白如此广泛使用的单位为何没有统一的标准，经常可以看到各大网站，在 html 中有各式各样 font-size 的定义。
以下均基于 375px 的屏幕，部分值包含对 dpr 的处理
PS: juejin 用的是 12px ，而且是所有屏幕，哈哈～
那么这些定义是出于什么情况下制定出来的，为何不能有一个统一的标准，开始了我的探索。
研究
10px
10px 源于最早使用 rem 时有个 62.5% 的说法，浏览器默认字体是 16px , 想要 1rem = 10px , 就需要将 html 的 font-size 设置为 10 / 16 即 62.5%
但是由于部分浏览器最小字体不支持 10px（仅支持 12px，但是国外的浏览器是 10px ），所以这个方案最初是一个舶来品，网上对此的吐槽并不少见。
可能也正是因为这个原因，导致了 px 值设置的百花齐放。
20px
20px 我没有考证到来源。
猜想：因为 10px 早期有部分浏览器无法支持，所以业界有朋友把解决方案提供成了 *2 来解决。期待有知道的朋友可以告诉我答案。
50px 与 100px
在我的猜测中 50px 和 100px 一样，都是为了方便前端开发人员写对应的 rem 值，只不过 50px 的公司，设计提供的是 750 的设计稿或测量方式，100px 的公司有可能提供的是 375 的设计稿或测量方式。
举个例子
font-size 为 50px 时， 意味着 1rem 在 375px 屏幕中代表了 50px ，而在 750px 的设计稿中就是 100px ，如果一个元素在设计稿中是 100px ，那么我们就可以直接在项目中写 1rem 。 100px 也是类似的道理。
37.5px、75px
这种方案最有名的就是 lib-flexible 了，使用 可视区域宽度 / 10 得到基准值 + 设置 meta 标签中的 initial-scale maximum-scale minimum-scale 为 1 / dpr
vw 的写法
不少网站目前是使用 vw 的写法，比如网易的 13.3333vw。
这么做有一个好处，以上提到的 10px 20px 50px 100px 都是基于 375 的，如果手机屏幕是 414 的，我们可以发现，这些数值会发生变化，公式为：(10|20|50|100) * clientWidth / 375 。
而 vw 则没有这个问题，直接 13.3333vw 所有屏幕都是可以适配的。
13.3333 / 100 * 375 = 50
13.3333 / 100 * 414 = 55.2
Rem 的便捷写法
不管是以上哪种方案都避不开一个问题：前端如何快捷的写出正确的 rem
50px、100px 这种就不多聊了，自己除以 100 写在样式也是没问题的
10px、20px、37.5px/75px 这种有两种方式
方法1，定义pxToRem方法
// 已 sass 为例子，其他如 less 类似
@function pxToRem($px){//$px为需要转换的字号
@return $px / $browser-default-font-size * 1rem;
}
.test {
width: pxToRem(750)
}
方法2，打包解决
- postcss-pxtorem
- postcss-px-to-viewport（这个和
rem关系不大了，但是也是利用打包思路将px转换为vw）
原理是在打包时，会自动将 css 中的 px 按照配置的 rem 转换规则进行转换
方法3，使用设计稿查看工具的附带功能
已蓝湖为例
总结
对 rem 的总结告一段落了， 对在研究过程中了解到的知识还是相当开森的！
