px单位
比较稳定精确,但在浏览器中放大缩小页面时会出现问题:用户改变浏览器字体,会使页面布局被打破,因此提出使用“em”
em单位
它需要一个参考点,一般以<body>的“font-size”为基准。比如使用“1em”来改变默认值“1em=16px”,这样一来,设置字体“14px”时,只需要将其设置为“1.4em”
body { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ } h1 { font-size: 2.4em; /*2.4em × 10 = 24px */ } p { font-size: 1.4em; /*1.4em × 10 = 14px */ } li { font-size: 1.4em; /*1.4 × ? = 14px ? */ }
为什么“li”的“1.4em”是不是“14px”是一个问号呢,因为“em”是一个相对值,相对于父元素,其真正计算公式是:
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
rem单位
CSS3的出现,引进了新的单位rem——font size of the root element。rem是相对于根元素<html>,意味着我们只需要确定一个参考值。
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*/ }
rem在浏览器中的兼容性
IE6-8无法支持,其他主流均可
原文链接:http://www.w3cplus.com/css3/define-font-size-with-css3-rem