Question

rem的前端页面引用插件是px怎么办

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的方案。网络有相关的文章，读者可以去研读，不过，还是在线工具为最佳，当然也可以将该工具下载下来使用。