css中单位em和rem之间的区别

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。

em是自适应当前使用字体大小的，1em等于当前字体大小，2em等于两倍字体大小（font-size）
1.子元素字体大小的em是相对于父元素字体大小
2.元素的width/height/padding/margin用em的话是相对于该元素的font-size
举个例子：

父亲

儿子 孙子

div 是父级元素 p是子级元素 span是孙子元素

div{
font-size:60px;
/* // 相当于宽度为：600px /
width:10em;
height:10em;
border: 1px solid red;
}
p{
/ // 相当于0.560 = 30px /
font-size:0.5em ;
/ // 相当于300px /
width:10em;
height:10em;
border: 1px solid black;
}
span{
/ // 相当于0.530 = 15px /
font-size:0.5em;
width: 10em;
height: 10em;
border: 1px solid gold;
display: block;
}

必须知道谷歌浏览器的最小字体是12px; ，也就是1em默认为12px，如果最外层的父元素直接把font-size设为1.5em，那么该元素的字体大小为18px（121.5）。

rem单位适用于做移动端页面，REM表示“Root EM”,字面上指的是根元素的em大小。
我们知道在Web文档的上下文中，根元素就是你的html元素。如果没有重置，html默认font-size:16px。
rem是全部的长度都相对于根元素，根元素是谁？元素。
通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
html {
font-size: 10px;
}
div {
font-size: 4rem; /* 40px /
width: 30rem; / 300px */
height: 30rem;
border: solid 1px black;
}
做响应式网站的时候我推荐使用rem,因为它只是相对于根元素变化,而em相对于太多了父元素了。有点难计算了

随便提下px：px是固定的像素，它不会随着页面变化而改变大小的。