# 概念
px, em, rem都是计量单位，都能表示尺寸
# px
px像素（Pixel），像素px是相对于显示器屏幕分辨率而言的，一个像素就是屏幕的最小单位px作为单位使用时，它是固定不变的，所以不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站，也不用于移动端页面适配
# em
em的值不固定，会继承父元素的字体大小，是一个相对单位
# rem
rem是css3中新增的相对单位，相对于html根元素- 可以通过修改根元素字体大小就可以调整所有字体大小
- 可以避免字体大小逐层复合的连锁反应
任意浏览器的默认字体都是16px
# 区别
px相对其他两个单位是固定不变的 —— 固定单位，不能适应浏览器缩放时产生的变化em是继承父元素的（如果父元素没有设置字体的话，则自动继承html根元素），rem是继承html根元素的大小
比如下面这个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.em {
width: 10em;
height: 10em;
background-color: red;
}
.rem {
width: 10rem;
height: 10rem;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="em">我是em</div>
<div class="rem">我是rem</div>
</div>
</body>
</html>
当父组件没有设置font-size大小时，em也继承html根元素的大小，也就是默认的16px，所以此时两个div的大小都是 16 * 10 = 160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
font-size: 10px;
}
.em {
width: 10em;
height: 10em;
background-color: red;
}
.rem {
width: 10rem;
height: 10rem;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="em">我是em</div>
<div class="rem">我是rem</div>
</div>
</body>
</html>
而父组件设置了字体大小后，em就会继承父组件的属性，此时的em也就相对于父组件的font-size来设定了，此时em = 10 * 10 = 100，rem 仍然是 16 * 10 = 160
使用rem时，修改根元素字体大小就能更改响应所有字体大小，而em存在字体大小逐层复合的连锁反应。所以用rem作为单位可以更好地适配移动端开发
所以在适配移动端开发或要响应式页面时，更推荐使用rem
