杭州蓝韵网络 | px 转 rem，你还在手算么?

在讲今天正文前，先给大家讲一个小故事：

大佬：rem，em，px有什么区别？

我：rem是相对单位，值基于根元素设置的font-size值（默认16px），em也是相对单位，值继承父元素font-size值，px则是绝对单位。

大佬：px怎么转rem ？

我：16px = 1rem，所以将 转换值 / 16 就可转换。

大佬：那每个地方我都手算一遍 ？

我：... 不然呢。

一个BE，感谢大佬最后告诉我一个关键词PostCss，涨姿势了。

抛砖引玉，今天主要介绍的主题就是PostCss（https://www.postcss.com.cn/）。

那什么是PostCss呢？用官方话术将是一个用JavaScript工具和插件转换CSS代码的工具。

声明：它不是 “ 预处理器 ”，因它没有像使用预处理那些功能，且能和预处理器结合使用；它也不是一个真正的 “ 后处理器 ”。因后处理器通常被视为在完成的样式表中根据CSS规范处理CSS，常做的是CSS属性添加浏览器私有前缀，但PostCSS并不局限于此。所以，最好的解释，它是个处理器（平台），拥有多样化的功能插件，可根据自己的需要配置需要的功能，甚至你自己都可编写PostCSS插件。

常用的插件有autoprefixer添加浏览器私有前缀，cssnext允许使用浏览器不支持的CSS新特性。感兴趣的可以根据关键词查一查，用一用。

回到主题，px自动化转rem需要什么插件？

答案是postcss-pxtorem。

既然知道了是什么插件，那该如何安装呢？

添加完毕，尝试重启下项目，使文件生效。

重启后，打开Chrome控制台，可以发现所有的px都被自动转化为rem。

根据配置可知，我们是以font-size为基准实现页面尺寸布局的，但如果一直写死16，如何实现自适应布局？

为了达到在不同设备宽度下对应不同的基准值，还需新建rem.js，代码如下。

核心思想： 以设计稿定义的宽1920，根元素字体大小16为基准，动态计算不同屏幕下的不同根元素的字体大小。

在公共的js文件中导入就好了。