rem与px之间的转换

首页 » 技术栈 » rem与px之间的转换

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注,它和em单位一样,都是一个相对单位。区别在于em是相对于元素的父元素的font-size进行计算,而rem是相对于根元素html的font-size进行计算。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

rem的使用

rem是相对于根元素<html>,这就意味着,我们只需在根元素设定一个参考值,这个参考值设置为多少可以根据我们的实际需要来定。

如果我们使用浏览器默认的字号16px,那么下面则是px单位与rem之间转换的一些数值:

|  px  |     rem       |

| 12 | 12/16 = .75 |
| 14 | 14/16 = .875 |
| 16 | 16/16 = 1.0 |
| 18 | 18/16 = 1.125 |
| 20 | 20/16 = 1.25 |
| 24 | 24/16 = 1.5 |
| 30 | 30/16 = 1.875 |
| 36 | 36/16 = 2.25 |
| 42 | 42/16 = 2.625 |
| 48 | 48/16 = 3.0 |

------------------------

为了计算方便,我喜欢在<html>元素中设置font-size值为62.5%,然后设置body,h1等其它对应的font值:

html {

font-size: 62.5%; / 10 ÷ 16 × 100% = 62.5% /

}

body { font-size: 1.4rem; } / =14px /

h1 { font-size: 2.4rem; } / =24px /

这就相当于在<html>中设置font-size为10px,此时,上面示例中的值也会相应改变:

|  px  |     rem        |

| 12 | 12/10 = 1.2 |
| 14 | 14/10 = 1.4 |
| 16 | 16/10 = 1.6 |
| 18 | 18/10 = 1.8 |
| 20 | 20/10 = 2.0 |
| 24 | 24/10 = 2.4 |
| 30 | 30/10 = 3.0 |
| 36 | 36/10 = 3.6 |
| 42 | 42/10 = 4.2 |
| 48 | 48/10 = 4.8 |
-------------------------

此时,在设置CSS字体大小的时候,我们就可以和平时一样,只用考虑需要多大字号,而不用考虑之间是如何换算的了。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,解决的方法也很简单,只需要多写一个绝对单位px的声明,这些浏览器就会忽略用rem设定的字体大小而采用px绝对单位的设置了。

html { font-size: 62.5%; }

body { font-size: 14px; font-size: 1.4rem; } / =14px /

h1 { font-size: 24px; font-size: 2.4rem; } / =24px /

PS: 据悉,目前很受欢迎的前端框架Bootstrap 4已不再支持IE8,它使用rem和em单位。放弃对IE8的支持意味着开发者可以放心地利用CSS的优点,不必研究css hack技巧或回退机制了。使用rem和em代替px单位,更适合做响应式布局,控制组件大小。如果要支持IE8的小伙伴,就只能继续用Bootstrap 3了。


打赏 赞(0)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

大家好!欢迎光临我的博客,在下就是闭月羞花沉鱼落雁才高八斗貌似天仙玉树凌风赛潘安一枝梨花压海棠人送外号上天下地无所不能美貌与智慧并存、古典与活泼的化身~~
觅·You小栈» rem与px之间的转换

版权声明: 本站原创文章,于2016年06月12日由觅·You发布,转载请注明出处

该篇文章的评论功能已被站长关闭

亭边总有花影,与我消遣一段旖旎的小时光

立即查看 联系作者
正在获取,请稍候...
00:00/00:00