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

html-css022

在css中输入px怎么自动换算成rem,第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的方案。网络有相关的文章,读者可以去研读,不过,还是在线工具为最佳,当然也可以将该工具下载下来使用。

楼主说的应该是更换网页皮肤吧。关键代码在这里:

<link

href="style_change/black/sty_black.css"

rel="stylesheet"

type="text/css"

id="ch_css"

/>

点击某个按钮的时候,用JS获取<link>标签的id,即获取这个<link>对象,然后通过JS更换href链接到另一个CSS样式表,达到换肤的目的。