liujiusheng / blog

个人博客,blog
19 stars 0 forks source link

浏览器中的单位px、em、rem、pt #56

Open liujiusheng opened 7 years ago

liujiusheng commented 7 years ago

1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。

2、em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。 为便于计算,body选择器中声明Font-size=62.5%。

3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)

4、rem(root em,根em):是CSS3新增的一个相对单位,相对的只是HTML根元素。所有使用这个单位的都只以根结点为参考而不以上一级或其它为参考。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。如:p {font-size:14px; font-size:.875rem;}