1.种类
px em rem 百分比
em:可伸缩单位，1个em等于父元素字体的大小；可以制定到<del>小数点后3位</del>.浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”
rem:使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素
px:固定大小单元，一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。
pt(点):固定大小，不能伸缩。点通常用于印刷媒体(任何打印在纸上的媒体,等等)。一个点等于一英寸的1/72。
百分比:文字在移动设备上仍然保持完全的可伸缩性和可访问性,类似于em.
转换工具：http://pxtoem.com/
2.关系：
2.1 四者关系
1em=12pt=16px=100%
1/16*width=em
需要转换的像素值 ÷ 父元素的font-size = em值
或
需要转换的像素值0.0625em=转换后的em值*
基础字体增大下的各文本单位比较
关系图
结论：em和百分比是首选.
2.2弹性布局：设置bodyfont-size的默认值
font-size:1em;
font-size:100%;应对ie的局限
文字和图片转换：
1.浏览器的默认字体大小是16px
2.如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值转换使用父元素
3.如果元素设置了字体大小，那么字体大小的转换使用父元素
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
4.元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：1 ÷ 元素的font-size × 需要转换的像素值 = em值
2.2 em和百分比
客户端改变文字大小后em和百分比的比较
结论：建议使用百分比
来源：
[1]css字体大小
[2]CSS中强大的EM
[3]css中单位px和em,rem的区别
网友评论