WonderCSS

了解 CSS 字体尺寸单位 rem

随着 CSS3 的出现,他在原有的文字单位的基础上引进了一些新的单位,包括我们今天要说的rem。下面我们先了解下在CSS未作任何设置的情况下,浏览器默认的文字尺寸为多大:

浏览器默认尺寸 16px 1em 100% 12pt

px(像素)和pt(磅)都是实数,百分比也很好理解。em 为相对长度单位,相对于父级的font-size。但 em 在容器多次嵌套时难免会出现问题,所以由此 W3C 推出了新的文字尺寸单位 rem (root element)。

rem 是相对于根节点(或者是html节点),意思就是说你可以在 <html> 定义一个单独的字体大小,然后所有其他元素使用 rem 相对于这个字体的百分比进行设置,这样我们就能更容易更准确的控制全站文字尺寸。

比如我们在HTML上设置文字大小为100%也就是16px:


html {
     font-size:100%;
}

那么推算起来14px则为 14÷16 = 0.875rem 。 12px为 12÷16 = 0.75rem。

在浏览器支持方面依然是由于属于 CSS3 的原因,低于 IE9 的浏览器都无法识别ren单位。由此如果需要照顾旧版IE浏览器的话,可以考虑“px”和“rem”一起使用,如此:


#box {
     font-size:14px;
     font-size:0.875rem;
}

By 于湛 发布于 2013.03.7 5,756 次浏览

了解 CSS 字体尺寸单位 rem》上有1条评论

  1. Pingback引用通告: 在CSS中关于“隐藏”的一些技巧 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注