闲谈rem-一一网

rem 是什么？

rem 全称（font size of the root element）相对于根节点 html 大小的单位

最早讨论是在 2002 年 4 月¹

兼容性²
图中可以看出 Android 的兼容性还是不错的

为什么要用 rem

浏览器时代

在 PC 端开发是，经常用到的单位是 px;px 可以在任意 pc 端显示大小相同。比如文字字体，在同样设置了 12px 的字体在 Google 和 IE 中，字体的显示大小是一致的。这是符合预期的。

移动端时代

时代在发展，现在进入了移动端时代，移动端因为屏幕较小，所以希望在较小的屏幕显示较多的信息，这就要求页面在大屏和小屏显示的信息是动态自适应的。最好是在任意大小的屏幕下显示的效果是一致的；比如 12px 的字体在 375px 屏幕可以显示的 12px，在 750px 屏幕下希望字体可以显示的稍微大一点，比如显示 24px；

为了动态适应移动端各种屏幕，催生了各种各样的适配方案，比如 mate 查询；使用 mate 标签在 375 和 750 屏幕分别使用不同的 css 做适配，就是其中的一种。但是，随着移动端快速发展，大量不同屏幕的移动端投放到市场，屏幕越来越多，使用 mate 标签适配越来越难做。面对如此复杂的移动端适配，人们提出 rem 方案

为什么不用百分比？
百分比的问题在于，如果使用百分比作为宽度值，那么它将是父值宽度的百分比³

rem 解决移动端适配

因为 rem 是相对于根节点也就是 html 的 font-size 的单位；

2011 年 5 月 Jonathan Snook 发表了 REM 字体大小调整文章⁴，提出使用 rem 作为文字单位动态调整文章文字大小的思路

rem 是相对单位，相对于根元素设定大小；也就是说如果根节点大小修改后，所有使用 rem 单位的大小也会动态修改；

那么根据不同屏幕的宽度，以相同的比例动态修改 html 的 font-size 大小，并将样式中 px 替换成 rem，这样是不是可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验？

比如：html 的 font-size 为 100px;设置 body 宽度 width:1rem;就相当对 body 的 width:100px;

这个 html 的 font-size 设置为 100px；非常方便 px 转 rem 的计算，开发中可以将 html 的 font-size 设置为 100px 吗？

不行，因为移动端屏幕宽度是不固定的，但是 UI 给的视觉稿宽度是固定的，假如 UI 给的设计稿宽度是 750px；希望开发过程中使用 10rem 可以在任意宽度的移动端上显示 750px 视觉稿的效果;
也就是说

移动端屏幕宽度为 750px 的页面上 html 的 font-size 应该设置为 75px;
移动端屏幕宽度为 375px 的页面上 html 的 font-size 应该设置为 37.5px;
移动端屏幕宽度为 414px 的页面上 html 的 font-size 应该设置为 41.4px;

这就是 根据不同屏幕的宽度，以相同的比例动态修改html的font-size大小 这样，无论在哪个屏幕上设置 10rem 都可以达到视觉图上 750px 的效果；

为什么要用到 px 转 rem 的 loader

方便开发

假如设计稿是 750，html 节点 font-size:36px ；如果开发需要设置一个 22px 大小的文字，需要计算一下 22/36 ≈ 0.6111 rem; 每写一个 px 都要计算一下 px/rem？开发效率极低；前端开发也是软件开发工程师啊，软件开发工程师不就是让程序代替人工吗？写个代码自动将 px 转换为 rem；再开发过程中 22px 的字体就设置为 22px，至于 22px ≈ 0.622rem 让程序去处理吧

方便维护

假如设计稿是 750px，html 节点 font-size:36px ；现在需要一个显示一个 22px 的文字，36/22 = 0.611;开发在维护css样式的时候不能直接确认这个 0.611 是和视觉稿上的 22px 的关系，开发还要在 36*0.611 = 21.996;然后再变更px再转换为rem;维护一套css太繁琐。太繁琐的重复事情交给代码处理就好了