rem与px之间的转换

背景

日常开发的过程中,经常会遇到设计稿仅提供px值的情况,仅能保证IOS设备下的显示正确,无法保证在多端设备中的元素比例正常。

问题

因此在日常开发中,我都会选择使用rem代替px。但是这个转换过程心智负担太重了,经常忘记要如何转换,所以我整理成了两段代码,平时转换的时候只要直接用就好了,不需要反复学习记忆其转换规则。

px转rem

<你要转换的px数> / parseFloat(getComputedStyle(document.documentElement).fontSize)

rem转px

parseFloat(getComputedStyle(document.documentElement).fontSize) * <你要转换的rem数>

补充

我比较建议你把这段代码存到自己的模板代码里,方便自己使用,不然每次都打开我这个博客就太麻烦了。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注