关于px,em,rem的那点事

px
之前做pc端切图的时候一直在使用px作为单位，那么px是什么呢，px即pixel，相对长度单位，是相对于显示器屏幕分辨率而言的。
em
其实我并没有用过这个em，只做过demo测试（＝。＝）em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。浏览器的默认字体尺寸大家都知道是16px，那么要用em作为单位来设置一个p标签的字体大小为 32px 时，就是p {font-size: 2em;}，好接下来在这个p标签中有一个a标签，你要给这个a标签也设置32px大小的字体，那么代码为p a {font-size: 1em}才对，因为em值不是固定不变的，会继承父元素的字体大小。所以用起来会感觉怪怪的。
rem
后来做移动端接触到了rem，rem(root element)，这个单位长的跟em挺像的，em是相对于父元素而言，而rem是相对于页面根元素而言的，所以只需要给html设定一个值。小伙伴曾经给过我一个方法供大家参考。

function rem() {
    var w = Math.min(document.documentElement.getBoundingClientRect().width, 500);
    document.getElementsByTagName('html')[0].style.fontSize = w * 100 / 320 + 'px';
}
rem();
window.onresize = function() {
    rem();
};

现在看这段js，如果你的手机是5s，那么 w 这个值就是320，那么给html设定的font-size就是 100px，现在相当于 100px 是 1rem，如果你页面中的p元素的font size是 12px，那么你写成 rem 怎么写，就是 12 ／ 100，即 0.12rem，当然div的宽和高也能这样表示了，比如一个div的宽和高都是100px，那么用rem表示就是 div {width: 1rem; height: 1rem;}
如果你的手机是6s ，那么 w 这个值就是375，那么给html设置的font-size就是 117.1875px，现在相当于 117.1875px 是1rem，那么你刚才给p设定的 0.12rem 就要乘上 117.1875px 肯定是个比 12px 大的数了。这样就能保证在5s中12px 在6s中比在5s中看着字体要大，这样才符合常规对吧。
至于为什么js中要用w＊100 / 320呢 这个320 是因为我们美工给我的图都是按照5s的标准来做的，就是320px，当然图都是640px的，所以我就除以的320，如果美工给你的图是375*2的 那么你就需要把320换成375，因为这样你在图里量出的div的宽度才能符合。
大概就是这些东西了，前端小白，能力有限，如有错误，望见谅。