在css中单位长度用的最多的是px、em、rem，这三个的区别是：
一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
三、em是相对于其父元素来设置字体大小的，一般都是以body的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值。
总之：对于em和rem的区别一句话概括：
em相对于父元素，rem相对于根元素。
#1一、em
1、子元素字体大小的em是相对于父元素字体大小
2、元素的width/height/padding/margin用em的话是相对于该元素的font-size
div
父元素div
p
子元素p
span孙元素span/span
/p
/div
css
div{
font-size:40px;
width:7.5em;/*px*/
height:7.5em;
border:solid2pxblack;
}
p{
font-size:0.5em;/*20px*/
width:7.5em;/*px*/
height:7.5em;
border:solid2pxblue;
color:blue;
}span{
font-size:0.5em;
width:7em;
height:6em;
border:solid1pxred;
display:block;
color:red;
}
#2二、rem
rem是全部的长度都相对于根元素，根元素是谁？html元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
div
父元素div
p
子元素p
span孙元素span/span
/p
/div
css
html{
font-size:10px;
}
div{
font-size:4rem;/*40px*/
width:20rem;/*px*/
height:20rem;
border:solid2pxblack;
}
p{
font-size:2rem;/*20px*/
width:10rem;
height:10rem;
border:solid1pxblue;
color:blue;
}
span{
font-size:1.5rem;
width:7rem;
height:6rem;
border:solid2pxred;
display:block;
color:red;
}
#3实际上做项目时，为了计算方便，通常设置html根元素的字体大小为62.5%
原理如下：
在桌面浏览器上font-size的默认值是16px;
可知font-size:62.5%;即表示10px（通过计算16*62.5%=10得到）
比较好的解释：
桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者对应的百分比，看起来的效果是一样的；
但是其他类型的设备的默认字体大小不一定是16px，
特别是高分辨率的设备，16px大小的字体在它们上面看起来会非常小，所以不能在body上设置具体像素值，
设置成百分比，可以按照设备的基准字体大小给编写的网页设置好最适合用户浏览的字体大小。
响应式Web设计实践》书中原文：最重要的不是屏幕实际的像素大小，屏幕上文字的可读性才是最重要的。
正确的rem使用方法：
html{font-size:62.5%;}header{height:8rem;/*在其他浏览器表示80px，在chrome上表示96px*/}#