标签：
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的.这个单位应该不用多说,大家用得最多。在Web页面初期制作中，我们都是使用px来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用em来定义Web页面的字体。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:
1em=16px
那么
12px=0.75em
10px=0.625em
em需要一个参考点，一般都是以<body>的font-size为基准。比如说我们使用1em=10px来改变默认值1em=16px，这样一来，我们设置字体大小相当于14px时，只需要将其值设置为1.4em。也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
body {
font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
}
h1 {
font-size: 2.4em; /*2.4em × 10 = 24px */
}
p {
font-size: 1.4em; /*1.4em × 10 = 14px */
}
li {
font-size: 1.4em; /*1.4 × ? = 14px ? */
}
为什么li的1.4em是不是14px是一个问号呢？如果你了解过em后，你会觉得这个问题是多问的。前面也简单的介绍过一回，在使用em作单位时，一定需要知道其父元素的设置，因为em就是一个相对值，而且是一个相对于父元素的值，其真正的计算公式是：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
这样的情况下1.4em可以是14px,也可以是20px，或者说是24px，总之是一个不确定值，那么解决这样的问题，要么你知道其父元素的值，要么呢在任何子元素中都使用1em
说的有点绕口了…直接看看下面的例子：
em会继承父元素的字体大小
css:
body{font-size: 16px;}
p{font-size:0.75em;}
span{font-size:2em;}
html:
<html>
我大小为16px;
<p>
段落文字大小为12px(16*0.75);
<span>
我大小是2em，即24px，这里是相对父级字号*2的，而不是相对body里面的16px
</span>
</p>
</html>
如果你确实需要查看详细的对应关系，这个网站提供一个px,em,rem单位转换工具
CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——font size of the root element 。下面我们就一起来详细的了解rem。
前面说了em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值.
大家看下面的代码:
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以16px为基准 ）。从上面的计算结果，我们使用rem就像使用px一样的方便，而且同时解决了px和em两者不同之处。
恩，理想很丰满，但现实很骨感，看下面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html {
font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
}
div{
width: 5rem;
height: 5rem;
background: #ccc;
}
a{
display: block;
padding: 1rem;
height: 3rem;
line-height: 3rem;
font-size: 1.8rem;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<a href="#"><span>点击</span></a>
</div>
</body>
</html>
根据上面的理论，div的宽高设置是5rem，那么就应该是50*50的宽高，而a标签里面的padding,height,line-height,font-size都应该是10的倍数才对，但是实际情况呢？
这是这段代码在chrome浏览器上测试的结果
这是 div 的大小：
a 标签的大小：
span标签的大小
可以很明显的看出，明明都设置了html:62.5%，也就是10px，但是实际却是除了a标签的font-size，其他都是按照12px在进行计算。但是同样的效果，我们在Safari浏览器上试试，如图：
标签：
原文地址：http://www.cnblogs.com/Qipahua/p/5066501.html
