px em rem区分和使用

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