关于rem单位

时间:2023-03-09 13:28:23
关于rem单位

CSS3的出现,他同时引进了一些新的属性,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。

em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字体的百分比进行设置,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需.

例子:

html { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ } body { font-size: 1.4rem;/*1.4 × 10px = 14px */ } h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/ } p {font-size:14px; font-size:1.4rem;}/*IE8及之前版本的IE浏览器使用14像素*/

根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。

从上面的计算结果,我们使用“rem尺寸字体”就像使用“px尺寸字体”一样的方便。