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
时间： 2024-10-11 02:34:00