概念
px、em、rem都是計量單位，都能表示尺寸，但是有所不同，其各有各的優缺點
px
px像素（Pixel），像素px是相對於顯示器屏幕分辨率而言的px作為單位是固定不變的，不能適應瀏覽器縮放時產生的變化，因此一般不用於響應式網站。
em
em的值不固定，會繼承父元素的字體大小，是一個相對單位
rem
rem是css3中新增的相對單位，相對於html根元素- 可以通過修改根元素字體大小就可以調整所有字體大小
- 可以避免字體大小逐層復合的連鎖反應
注意：任意瀏覽器的默認字體都是16px
區別
通過上述概念介紹可以看出區別如下：
px相對其他兩個單位是固定不變的，不能適應瀏覽器縮放時產生的變化em是根據父元素繼承相應大小而不是固定的，rem是繼承html根元素的大小
下面通過代碼演示一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"> .em{ width: 10em; height: 10em; background-color: red;
} .rem{ width: 10rem; height: 10rem; background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="em"></div>
<div class="rem"></div>
</div>
</body>
</html>
運行效果如下：
因為父盒子box沒有設置字體大小，即自動繼承html根元素，默認字體大小為16px，所以兩個子元素盒子都是：16 * 10 = 160
下面給box父盒子設置一個自己的字體大小：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"> .em{ width: 10em; height: 10em; background-color: red;
} .rem{ width: 10rem; height: 10rem; background-color: blue;
}
</style>
</head>
<body>
<div class="box" style="font-size: 8px;">
<div class="em">em</div>
<div class="rem">rem</div>
</div>
</body>
</html>
運行效果：
這里將父盒子box設置了font-size:8px ，所以em盒子就相對父盒子box的字體大小為：8 * 10 = 80 ，而rem盒子還是相對html根元素字體大小為：16 * 10 = 160
這就是em和rem兩個計量單位的區別，個人感覺還是rem更香，修改根元素字體大小就能更改響應所有字體大小，而em存在字體大小逐層復合的連鎖反應。所以用rem作為單位可以更好地適配移動端開發