px
px就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现！可但是！但可是！如果全篇用px布局会暗藏一个尴尬的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>px绝对单位</title>
<style type="text/css">
#px1 {
width: 200px;
height: 200px;
background: lightblue;
overflow: hidden;
}
</style>
</head>
<body>
<div id="px1">px就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现！可但是！但可是！如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px。。。。。</div>
</body>
</html>
使用px的效果图：
em
em是相对单位，em相对的基准点就是浏览器的字体大小，浏览器默认字体大小是16px，也就是1em默认等于16px，如果你想给某个文字设定为14px，就这样写 font-size:0.875em; 公式是14/16=0.875em，如果想要15px，那么就是15/16=0.938em, 例如margin:0.938em; 依次类推，样式表都用em来写的话，就可以解决ctrl+，ctrl-时造成的页面错乱问题！！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em相对单位</title>
<style type="text/css">
#em {
/*浏览器一般默认字体大小为16px 即 1em = 16px*/
font-size:0.625em; /*10px/16px = 0.625 通过设置可更改字体大小 即1em = 10px 但是chrome在字体小于12px时都当12px 处理，所以这里准却的是 1em = 12px*/
width: 25em; /* 25*12 = 300px */
height: 25em;
background: lightblue;
}
</style>
</head>
<body>
<div id="em">而em是相对单位，em相对的基准点就是浏览器的字体大小，浏览器默认字体大小是16px，也就是1em默认等于16px，如果你想给某个文字设定为14px，就这样写 font-size:0.875em; 公式是14/16=0.875em，如果想要15px，那么就是15/16=0.938em, 例如margin:0.938em; 依次类推，样式表都用em来写的话，就可以解决ctrl+，ctrl-时造成的页面错乱问题,常用em对照表如下</div>
<p>谷歌font-size:62.5%刚好是10像素，而谷歌是不支持小于12像素的字体的，所以，谷歌无形当中将所有的rem全部变大了。这下麻烦了，所有的地方都错位了。chrome在字体小于12px时都当12px 处理，也就是设置62.5%相当于设置成了75.0%。但是在除的时候又是除的10得到rem值，那么当然错位.</p>
</body>
</html>
使用em效果图
rem
问题又来了，em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算,在整个页面内1em并不是一个固定不变的值，1em不停的变换，这就很繁琐了。但是没关系，css3为我们引入一个新的单位就是rem可以解决这个问题 。
rem和em一样也是一个相对单位，为了方便理解，我们就理解rem为root em，顾名思义rem只相对根节点计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rem相对单位</title>
<style type="text/css">
html {
font-size: 75%; /*设置整个页面的默认字体大小为10px 12px/16px = 0.75 1rem = 12px*/
}
#rem {
width: 25rem; /* 25*12 = 300px */
height: 25rem;
background: lightblue;
}
#rem2 {
font-size: 150%; /*这里设置无效 因为整个页面的字体大小统一为html设置的font-size: 75%;*/
width:30rem; /* 30*12 = 360px */
height: 30rem;
background: lightgreen;
}
</style>
</head>
<body>
<div id="rem">
问题又来了，em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算,在整个页面内1em并不是一个固定不变的值，1em不停的变换，再加上数学是体育老师教的，这不是自作孽吗。。。没关系，css3为我们引入一个新的单位就是rem可以解决这个问题 。
rem和em一样也是一个相对单位，为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。
</div>
<div id="rem2">
声明一下：rem是css3属性，没错！这就是说屌丝ie678不支持rem属性，只有chrome、firefox等高富帅支持！
</div>
</body>
</html>
使用rem效果图
下面这张图想说明的是当页面整体的字体大小设定后，所有子元素的1rem都相对这个值变换，子元素本身重新设置的字体大小是无效的！
注意：谷歌font-size:62.5%刚好是10像素，而谷歌是不支持小于12像素的字体的！所以，谷歌无形当中将所有的rem全部变大了。这下麻烦了，所有的地方都错位了。chrome在字体小于12px时都当12px 处理，也就是设置62.5%相当于设置成了75.0%。但是在除的时候又是除的10得到rem值，那么当然错位。
总结：px多用于pc端，而em,rem用于移动端；px就是绝对单位，em和rem都是相对单位，浏览器默认的字体大小一般为16px,开发者可以自行设置默认字体大小，其中的细节还需要多多注意。今天去面试刚好面试官问起，我意识到自己有些忘了，所以借鉴几篇优秀博客，自己实践一下才能更好的掌握.
参考链接：px、em和rem的区别和使用案例