CSS单位px、pt、em、rem介绍
在设计中总喜欢使用px为单位，同样web页面制作中一般都使用px为单位，但看到国外的站点使用em、rem的居多，现在就对这些单位做一个对比介绍。
px
px即像素（Pixel），相对长度单位，像素px是相对于显示器屏幕分辨率而言的
在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题。因此，这时就提出了使用“em”来定义Web页面的字体。
pt
pt就是point，是印刷行业常用单位，等于1/72英寸，所以它是一个自然界标准的长度单位，也称为“绝对长度”
在实际网页制作中使用的pt的机会并不多，但也有人尝试过pt单位，在这里就不做具体介绍了，仅知道它是印刷单位即可。
em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。
em的特点
- em的值并不是固定的；
- em会继承父级元素的字体大小
在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
所有未经调整的浏览器都符合: 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的时候，需要注意：
- body选择器中声明
font-size=62.5%； - 将你的原来的px数值除以10，然后换上em作为单位；
- 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
rem
rem ：是CSS3新增的一个相对单位（root em，根em）。
这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
简单实例：
html {font-size:62.5%;} /* 10 ÷ 16 x 100% = 62.5% */
body {font-size:1.4rem;} /* 1.4 x 10px = 14px */
h1 {font-size:2.4rem;} /* 2.4 x 10px = 24px */
我在根元素 <html> 中定义了一个基本字体大小为 62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。
举个栗子
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>px-em-rem测试页面</title>
<style>
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
background: url(../../images/grid.png);
}
h1 {
font-size: 2.4rem;
}
.list li {font-size: 1.8rem;}
</style>
</head>
<body>
<div class="wrap">
<h1>我是和标题测试字体</h1>
<ul class="list">
<li>我是列表新闻</li>
<li>我是列表新闻</li>
<li>我是列表新闻</li>
<li>我是列表新闻</li>
</ul>
</div>
</body>
</html>
总结：
综上，在网页制作做还是比较推荐最后的rem,目前只有IE8以下无法支持，但其它主流浏览器都能良好支持，包括移动端。
在这里为大家提供一个px,em,rem单位转换工具地址：http://pxtoem.com/