px
px像素（Pixel）。页面相对于显示器分辨率来布局，19201080的分辨率和960720的分辨率看到的px布局会很大区别。
em
em单位继承父级元素的字体大小
.div{
font-size:50px;
}
.div>p{
font-size:1em;
}
p就是50px;
通俗易懂
着重说一下rem
它的全称是 font size of the root element （根元素的字体大小）
它是CSS3中新增加的一个尺寸（度量）单位，根节点（html）的font-size决定了rem的尺寸，也就是说它是一个相对单位。
浏览器的默认字体大小为16px，所以说默认的1rem = 16px;
由于rem的特性，他很适合做移动端的适配
举个栗子：
function init() {
// 获取屏幕宽度
var width = document.documentElement.clientWidth
// 设置根元素字体大小。此时为宽的47等分
document.documentElement.style.fontSize = width / 47 + 'px'
}
// 首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)
我们动态的监听手机屏幕的宽度，根据设计图的宽度来适配rem的尺寸。
document.documentElement.style.fontSize = width / 47 + 'px'
我的设计图宽度为47rem，为了方便这里设置width/47 px = 1rem；
这样，我不论屏幕的宽度如何变化都可以根据rem来做“百分比布局”
iPhone 5
iPhone 8 P
i Pad Pro
