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

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

px单位

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

pt单位

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

em单位

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

rem单位

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

PixelsEMsPercentPoints
6px0.375em37.50%5pt
7px0.438em43.80%5.5pt
8px0.5em50%6pt
9px0.563em56.30%7pt
10px0.625em62.50%8pt
11px0.688em68.80%8pt
12px0.75em75%9pt
13px0.813em81.30%10pt
14px0.875em87.50%11pt
15px0.938em93.80%11pt
16px1em100%12pt
17px1.063em106.30%13pt
18px1.125em112.50%14pt
19px1.188em118.80%14pt
20px1.25em125%15pt
21px1.313em131.30%16pt
22px1.375em137.50%17pt
23px1.438em143.80%17pt
24px1.5em150%18pt

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

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

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

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

相关推荐