px、pt、em与rem的区别（结尾不容错过哦）

　　最近学DRP视频的时候讲到了CSS部分，里面又一次讲解了字体的大小一部分知识，然后就收集了一下相关的介绍分享给大家。

　　1、px单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的，国内用的较多，目前还是推荐使用px为好。

　　2、em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多。

　　3、pt单位名称为点（Point），绝对长度单位一般老版本的table使用长度大小的单位，但是现在基本上已经不使用了。

　　4、rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

　　下面就让我们逐个来认识一下：

①px ：像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

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

②em ：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
em 特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

③rem ：是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

④pt ：印刷业上常使用的单位，磅的意思，一般用于页面打印排版，它等于1/72英寸。

　　我相信看到这篇文章前100名的朋友在设置页面字体大小时95%都是使用PX这个单位来调整的，查阅相关文章是看到了一篇这样的文章，文章的标题很吓人——95%的中国网站需要重写CSS  ，很吓人但是确实是存在这样的问题的，我们应该慢慢调整我们的编程习惯，让它更加适合用户的需要。

　　最近APP很火，在APP中我们设置字体大小时就可以使用rem这个目前还是很低调的CSS单位，它对于不同尺寸屏幕的适应性就目前看应该是最好的，给大家推荐另一篇文章——web app变革之rem。

　　希望这篇文章你能喜欢，谢谢~