em,rem,px,rpx的区别与使用

一、概念

px像素（Pixel）:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 px特点
1.IE无法调整那些使用px作为单位的字体大小；
2.国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3.Firefox能够调整px和em，rem，但是有很多人使用IE浏览器(或内核)。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em特点
1.em的值并不是固定的；
2.em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么0.625em=10px。为了简化font-size的换算，在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样1em=10px, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

body {
   
  font-size: 62.5%;
}
.banner {
   
  width: 30em;
}

rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。由于设计稿使用的屏幕宽度为750，所以此时rem与设计稿上px的换算关系为 1rem = 100px

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
rpx 为小程序中使用的相对单位，用法和rem类似， 1rpx = 屏幕宽度/750 px, 所以在屏幕宽度为750的设计稿中，1rpx = 1px。

二、代码理解

.em{
   
	width: 3em;
	height: 3em;
	background-color: blue;
}
.rem{