CSS单位 px pt em和rem 之间的区别

CSS中可以定义大小的单位有四种px，pt，em，rem，而px可以说在网页开发中最常见的单位了。不过现在如今的大多数网站已经开始用rem这个单位了。那么这四个单位有什么区别呢？

 

px|pt|em|rem区别

px单位

px（像素），国内网站相对来说用得比较多，任意浏览器的默认字体高都是16px。

pt单位

pt是point，是印刷行业常用单位，等于1/72英寸。

em单位

 em才是真正的“相对单位”，它不是一个具体的数值，而是相对于父元素的属性计算出来的大小，一般移动终端布局用em比较合适。

rem单位

rem单位是CSS3中新增的一个相对单位，只不过它要比em单位强大一些，因为它是集相对大小和绝对大小的 优点于一身，也就是说它除了有px，pt 的绝对大小属性外，还具备了em的相对大小属性。为什么呢？因为rem这个单位是相对于根元素HTML的。而如果我们想修改大小，只需修改根元素HMTL 的大小就可以了。除了IE8及更早的版本个，目前所有的主流浏览器均支持此属性。

 

PX-EM-百分比-pt之间的对应关系

Pixels	EMs	Percent	Points
6px	0.375em	37.50%	5pt
7px	0.438em	43.80%	5.5pt
8px	0.5em	50%	6pt
9px	0.563em	56.30%	7pt
10px	0.625em	62.50%	8pt
11px	0.688em	68.80%	8pt
12px	0.75em	75%	9pt
13px	0.813em	81.30%	10pt
14px	0.875em	87.50%	11pt
15px	0.938em	93.80%	11pt
16px	1em	100%	12pt
17px	1.063em	106.30%	13pt
18px	1.125em	112.50%	14pt
19px	1.188em	118.80%	14pt
20px	1.25em	125%	15pt
21px	1.313em	131.30%	16pt
22px	1.375em	137.50%	17pt
23px	1.438em	143.80%	17pt
24px	1.5em	150%	18pt

 

转换公式：

pt=px乘以3/4
倍数em=倍数x16px

总结：每一个单位都有其存在的理由，只不过新出现的单位会更优，更方便。不管你在网站建设中用哪一个单位都没人 会说 你，只是新东西出来了，你不用，你就掉队了。在这里强烈推荐使用rem单位，不过也要注意属性的兼容性，IE8以下不支持rem，所以用rem好还是不用 rem好还得看你项目的目标用户，毕竟你的网站不是做给自己看的。

 

原文：http://yunkus.com/article/div/218.html

转自：CSS单位 px pt em和rem 之间的区别