区别：
相同点：二者都是相对单位
不同点：rem（font size of the root element）是指相对于根元素的字体大小的单位，
em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依
赖根元素一个是依赖父元素计算。
px：常用单位px，它是一个绝对单位
rem的使用------>rem能等比例适配所有屏幕
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>测试rem和em单位</title>
</head>
<style type="text/css">
@media(max-width: 1930px){
html{
background: #ddd;
font-size: 16px;
}
}
@media(max-width: 7681px) and (min-width:1930px){
html{
background: #fff;
font-size:160px;
}
}
h4{
font-size:1.25rem;
}
td{
font-size:1.5rem;
}
</style>
<body border=1 style="border:1px solid red;">
<h4>测试</h4>
<table border="1" width="100%">
<tr>
<td width=33%>你好吗</td>
<td width=33%>我叫小明</td>
<td width=33%>我家住在山个牢牢</td>
</tr>
</table>
</body>
</html>
此处，代码使用rem，说明是相对于根目录的相对单位，在此实例中，则是相当于<html>标签。大多数人可能会以为<body>标签也是根目录了。但是是实例中，如果是相当于body，则无法达到应有的效果
如图，在iPhone X 375*812尺寸下，满足@media(max-width: 1930px)，所以width为16px.
<h4>标签，font-size：1.25rem，则为1.25*16px=20px
<td>标签，font-size：1.5rem，则为1.5*16px=24px
em的使用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>测试部分(runoob.com)</title>
</head>
<style type="text/css">
@media(max-width: 1930px){
html{
font-size:20px;
}
body{
background: #ddd;
font-size: 16px;
}
}
@media(max-width: 7681px) and (min-width:1930px){
html{
font-size:20px;
}
body{
background: #fff;
font-size:160px;
}
}
h4{
font-size:1.25em;
}
td{
font-size:1.5em;
}
</style>
<body border=1 style="border:1px solid red;">
<h4>测试</h4>
<table border="1" width="100%">
<tr>
<td width=33%>你好吗</td>
<td width=33%>我叫小明</td>
<td width=33%>我家住在山个牢牢</td>
</tr>
</table>
</body>
</html>
此处，代码使用em，说明是相对于父目录的相对单位，只要是父级目录即可。在如图代码中<tr><table><body>啥的都可以作为父级目录，此处要把腹肌目录和根目录区别清楚。
如图，在iPhone X 375*812尺寸下，满足@media(max-width: 1930px)，此处设置了<html>是font-size：20px，<body>是font-size：16px，按上一段话，所说，此处应该是16px，应为<h4>和<td>标签最近的父元素就是<body>，所以width为16px.此处目前为16px
<h4>标签，font-size：1.25em，则为1.25*16px=20px
<td>标签，font-size：1.5em，则为1.5*16px=24px
如果把body元素的去掉，则此处会直接继承到<html>的属性，font-size将为20px。可以自行测试
---->如有疑问，请发表评论，或者联系博主：[email protected]，欢迎哦^_^