核心提示:px、em、rem都是用来描述字体大小的单位px px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 任意浏览器的默认字体大小都是16px。 给HTML标签设置font-s...
px、em、rem都是用来描述字体大小的单位
px
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
任意浏览器的默认字体大小都是16px。
给HTML标签设置font-size属性并赋值,将根据设置的值显示字体, 其子标签若没有单独设置font-size,子标签的字体大小和父标签一致。否则,按设置的值显示。支持度:目前所有浏览器。
em
em是相对长度单位。em的值并不是固定的,em会继承父级元素的大小。 1em=16px;p p p p p papapapapapapa
ppppppppppppppppppppp papapapapap
#demo{ font-size:1em; } #demo a{ font-size:0.75em; } .demo2{ font-size:1em; } .demo2 i{ font-size:2em; }运行结果:

支持度:IE8 及以上支持,其它浏览器。
但是可以看到em是相对父级元素的,但HTML标签的嵌套太过复杂时使用em就不是太好的选择了。
rem
对于不支持rem的浏览器,多写一个px就好。不支持的浏览器会自行忽略rem。rem是CSS3中新增的一个相对单位。root em(相对于根元素的em)。
使用rem设定字体大小时,仍然是相对的,但是相对的只是html根元素。
只需要修改根元素,就可以成比例的调整所有的字体大小,还能避免因为层级嵌套太多造成的连锁反应。
rem与px的换算
1rem等于多少px呢?1rem等于html根元素设定的font-size的px值。
假设我们设定如下
html{ font-size:14px; }
此时1rem=14px。
px 与 rem 的选择?
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。
对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。