说明
px、em、rem都是计量单位，都能表示尺寸，但是有所不同，其各有各的优缺点
px
px像素（Pixel），像素px是相对于显示器屏幕分辨率而言的
px作为单位是固定不变的，不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。
em
em 是相对长度单位，相对父元素的字体大小
缺点：可以避免字体大小逐层复合的连锁反应
例子
css：
<style>
div {
font-size: 40px;
width: 7em; /* 40px * 7em = 280px */
height: 7em;
border: solid 1px black;
}
p {
font-size: 0.5em; /* 40px * 0.5em = 20px */
width: 7.5em; /* 20px * 7.5 = 150px */
height: 150px;
border: solid 1px blue ;
color: blue;
}
span {
font-size: 0.5em; /* 20px * 0.5em = 10px */
width: 7em; /* 10px * 7em = 70px*/
height: 70px;
border: solid 1px red;
display: block;
color: red;
}
</style>
html：
<div>
父元素div
<p>
子元素p
<span>孙元素span</span>
</p>
</div>
rem
rem是css3中新增的相对单位，相对于html根元素的字体大小
例子
<style>
html {
font-size: 10px;
}
div {
/* 根据html标签的字体大小算出来的 */
font-size: 4rem; /* 10px * 4rem = 40px */
width: 20rem; /* 10px * 20rem = 200px */
height: 200px;
border: solid 2px black;
}
p {
font-size: 2rem; /* 10px * 2rem = 20px */
width: 10rem; /* 10px * 10rem = 100px */
height: 100px;
border: solid 1px blue;
color:blue ;
}
span {
font-size: 1.5rem;
width: 7rem;
height: 6rem;
border: solid 2px red;
display: block;
color: red;
}
</style>
<div>
父元素div
<p>
子元素p
<span>孙元素span</span>
</p>
</div>
总结
- px相对其他两个单位是固定不变的，不能适应浏览器缩放时产生的变化
- em是根据父元素继承相应大小而不是固定的
- rem是继承html根元素的大小
参考：
https://www.cnblogs.com/libo-web/p/15783997.html
https://blog.csdn.net/weixin_44019523/article/details/114155763