Question

在css中输入px怎么自动换算成rem

Answer 1

多年的前端开发实践中经历了从最初的PC固定布局、手机端固定布局（两端留白）到响应式设计（媒体查询、百分比布局等），直到最终选择rem+Javascript的模式，但是在项目开发中需要将大量的样式由px转换为rem，单位之间的换算虽然不复杂，但是工作量却很大。

那么能不能有一种自动化的解决方案呢？通过搜索，找到了一种方案。读者可以直接在百度搜索引擎中搜索“用grunt写了一个px和rem互转的工具”，

点击图中用边框标示的部分，进入“用grunt写了一个px和rem互转的工具”页面，

在该文章的末尾还提供了一个在线转换工具，如下图所示，可以很方便地将px转换为rem，批量操作，几秒就能完成。

笔者将实际项目中的CSS代码拷贝进入转换，有几个参数要选择，进行转换效果如

这里的参数选择和你在项目中的设计图尺寸和根元素字体大小相关，至于border的处理是因为在安卓下使用rem单位的支持性特别差，你可能写2rem或者3rem都没用默认会变成1px，所以在使用border属性时很多时候不建议处理border。
Javascript控制根元素大小的代码读者可以将代码放在公共的Js文件中，确保每个HTML文件都引用到。
在线工具中还提供了自动生成媒体查询的功能，这在响应式设计中可以少些许多CSS代码，让前端开发事半功倍。这里不做介绍，读者根据实际情况决定是否使用该功能。

其实，读者也可以自己写一个javascript函数实现上述功能，不过，重复发明轮子也没有什么意义，除了上面的工具之外（javascript实现），还有Sass的方案。网络有相关的文章，读者可以去研读，不过，还是在线工具为最佳，当然也可以将该工具下载下来使用。