css中相对单位 |css3 html5心得

/* 百分比 */
div {
width: 50%;
height: 50%;
}

百分比单位是基于父元素计算出来的，例如上面的代码中div的宽和高都是父容器的一半。

/* em */
p {
font-size: 1.2em;
margin-top: 0.5em;
}

em单位是相对于元素自身的字体大小计算的，例如上面的代码中p的字体大小是父元素字体大小的1.2倍，上边距是字体大小的0.5倍。

/* rem */
body {
font-size: 16px;
}
div {
width: 10rem;
height: 5rem;
}

rem单位是相对于根元素html的字体大小计算的，例如上面的代码中div的宽为10倍根元素字体大小，高为5倍根元素字体大小。

相对单位的使用可以让网页在不同的设备和环境下显示的更为一致和友好。