px
Pixel像素，相对长度单位。像素是相对于显示器分辨率而言。
em
相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em= 16px。有时为简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%,此时1em=16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说换算时只需将原有px数值除以10，然后换上em作为单位即可。
特点：
1 em 的值并不是固定的。
2 em的值会继承父级元素的字体大小。
rem
rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，虽然仍是相对大小，但相对的只是HTML根元素。通过rem，既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前除IE8及更早版本外，所有浏览器均已支持rem。对于不支持的浏览器，可以多写一个绝对单位的声明。如此浏览器会忽略rem设定的字体大小。
注意：
1 若没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px,若指定值，则1rem就是指定值
2 html设置为62.5%或者10px时会失效，是因为 小于12px或者75%的字体大小 不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。
px，em,rem 在线转换工具：地址：http://pxtoem.com/
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中的常用的元素单位px,em与rem间的关系</title>
</head>
<style>
html {
/*浏览器默认为16px*/
/*font-size: 16px;*/
/*谷歌文本最小12px,设置为10px无效*/
/*font-size: 10px;*/
}
.px,.em,.rem{
text-align: center;
}
.px {
font-size: 20px;
width: 100px; /*px,相对于屏幕*/
height: 100px; /*后面有line-height,此处可选*/
background-color: #eeb46a;
line-height: 100px;
}
.em {
font-size: 20px;
width: 5em; /*em,相对于当前元素或父元素文本大小*/
height: 5em;
background-color: #03e63a;
line-height: 100px;
}
/*css3新增单位*/
.rem {
font-size:1.25rem;
width: 6.25rem; /*em,相对于根html元素文本大小*/
height: 6.25rem;
background-color: #1dabf0;
line-height: 6.25rem;
}
</style>
<body>
<h3>CSS3中的常用的元素单位</h3>
<div class="px">px</div>
<div class="em">em</div>
<div class="rem">rem</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写笔记
