px,em,pt与%的区别与换算

定义

• 像素(px):像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备。
• “Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展示。一个em等于当前的字体大小,例如,如果文档的字体大小是12 pt,1 em等于12 pt。Ems在本质上是可伸缩的,所以2 em相当于24 pt，0.5 em相当于6 pt等。ems由于其可伸缩性和适应移动设备的特性在web文档中正变得越来越受欢迎。
• 点(pt):点通常用于印刷媒体(任何打印在纸上的媒体,等等)。一个点等于一英寸的1/72。点更像像素,他们是固定大小的单位,不能伸缩。
• 百分比(%):百分比单位更像“em”单位,除了一些根本性的差异。首先,当前的字体大小等于100%(比如12 pt = 100%)。当使用百分比单位,你的文字在移动设备上仍然保持完全的可伸缩性和可访问性。

em和px区别

（一）关键点

1. 以前IE无法调整那些使用px作为单位的字体大小，但现在几乎IE都支持；
　　2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
　　3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

（二）em如何来的？

1. 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符
合: 1em=16px。 那么12px=0.75em,10px=0.625em。
　　2. 为了简化font-size的换算，需要在css中的body选择器中声明 Font- size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

（三）em有如下特点：

1. em的值并不是固定的;
　　2. em会继承父级元素的字体大小。

（四）__所以我们在写CSS的时候，需要注意两点： __

1. body选择器中声明Font-size=62.5%；
　　2.将你的原来的px数值除以10，然后换上em作为单位;
　　3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
例如：

body{font-size:62.5%;}
#content{
font-size:1.2em;
}
#content p{
font-size:1em;/*这个字体是12px；*/
/*font-size:1.2em;  它因继承#content的字体高而变为了1.2em=14.4px。*/
}

再如: 以下表示首行缩进两个字符

p { text-indent: 2em; }

em和percent的对比

• 若设置body的字体大小分别为1em和100%，分别设置text-size，则：

  
  
  

  em和percent.png

当客户端的浏览器文本大小设置为“medium”, ems和百分比之间没有区别。然而,当设置改变,差别是相当大的。“Smallest”设置,ems比百分比小得多,而当设置为“Largest”,这时恰恰相反,ems比百分比显示地更大。有些可能会说,当真正去扩展时em单位在扩展,在实际的应用程序中,em文本尺度变化太大, 在一些客户端机器上最小的文本变得不是很清晰。

四者的对比

一般来说,1 em = 12 pt = 16 px = 100%。确定body的字体大小时候，当使用这些font-size, 增加基础本字体大小(使用CSS选择器)从100%到120%，让我们看看会发生什么。

四者区别.png

结论

一般来说,当我开始一个新的设计,我将在body元素上使用百分比(body { font-size: 62.5%; })，然后使用em单位大小来比较。只要body使用百分比单位设置,您可以选择使用百分比或ems或其他任何CSS规则和选择器并且在你的基础字体大小上保持使用百分比的好处。在过去的几年中,这确实成为设计的标准。

像素现在被认为是可接受的字体大小单位(用户可以使用浏览器的“缩放”功能读小文本),虽然由于移动设备非常高的密度屏幕(一些Android和iPhone设备每英寸超过200到 300个像素,让你11 - 12-pixel字体很难看到!)他们也开始引起一些问题。因此,我将继续使用百分比作为web文档中的基础字体大小。