px
px,指像素,相对长度单位,是相对于屏幕分辨率而言的
特点:
- 比较稳定和精确
- IE无法调整使用px作为单位的网页的字体大小
em
em,相对长度单位,相对于其父级定义的大小
特点:
- em的值并不是固定的
- em会继承父级元素的字体大小,如果父级没有设置,会继续向上寻找,直到浏览器的默认字体大小
举例:
<style>
body{
font-size:16px;
}
div{
font-size:20px;
}
span{
font-size:2em;
}
</style>
<body>
<p>明天会更好</p>
<div>
<span>明天会更好</span>
</div>
</body>
将body的字体大小设置为16px,div的字体大小设置为20px,span的字体大小设置为2em,最终显示效果如下:
span里面字体的大小为40px,为div设置的20px的2倍,p标签里的字体大小继承body里的大小,为16px
rem
rem是css3中新增的字体单位,也是相对单位,与em不同的是,rem相对于根元素,通过改变根元素html设置的字体大小,来改变其他元素的字体大小,减少了em作为单位的繁琐计算
因为浏览器的默认字体大小是16px,所以在使用rem单位时,一般给根元素html的font-size设置为62.5%,即10/16 * 100% = 62.5%,这样1rem = 10px,方便给其他元素设置大小。这样设置一个24px大小的字体时,只需写2.4rem,以此类推
rem也更适用于移动端适配
注意:rem不支持在IE8及更早的版本中使用,可使用px作为代替