版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/88991557
rem与em都是相对单位，我们使用它们的目的就是为了适应各种手机屏幕。
rem是根据html根节点来计算的，而em是继承父元素的字体。
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style type="text/css">
html {
font-size: 40px;
}
body {
font-size: 20px;
}
.use_em,
.use_rem {
font-size: 14px;
}
/*use_em=14*2=28*/
.use_em span{
font-size:1em;
}
/*html=40*1=40*/
.use_rem span{
font-size:1rem;
}
/*body=20*2=40*/
.img_em{
width: 2em;
height: 2em;
}
/*html=40*2=80*/
.img_rem{
width: 2rem;
height: 2rem;
}
</style>
</head>
<body>
<!-- 第一个span继承了它的父元素div的大小，所以是14px-->
<div class="use_em">EM
<span>使用em</span>
</div>
<!--第二个span是通过html来计算的，所以是40px-->
<div class="use_rem">REM
<span>使用rem</span>
</div>
<p>图片使用em</p>
<!--第一个img继承的body-->
<img src="img/image/2.png" class="img_em">
<!--第二个img根据html来计算-->
<p>图片使用rem</p>
<img src="img/image/3.png" class="img_rem">
</body>效果：
