px、em、rem、rpx 用法 与 区别

这篇文章记录前端（包含小程序）开发中常用到的几个单位 px、em、rem、rpx 的区别和用法。

px

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

em

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

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

实例

body {
  font-size: 62.5%;
}

.banner {
  width: 30em;
}
   
   

• 1
• 2
• 3
• 4
• 5
• 6
• 7

rem

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

前端使用rem的实例

function getInitStyle() {
  const width = window.document.documentElement.clientWidth > 768 ? 768 : window.document.documentElement.clientWidth;
  const height = window.document.documentElement.clientHeight;
  const maxWidth = (window.document.documentElement.clientWidth <= 768 || height * 2 / 3 > width) ? width : height * 2 / 3;
  document.documentElement.style.fontSize = `${maxWidth / 7.5}px`;
  document.body.style.width = `${maxWidth}px`;
}
   
   

• 1
• 2
• 3
• 4
• 5
• 6
• 7

由于设计稿使用的屏幕宽度为750，所以此时rem与设计稿上px的换算关系为 1rem = 100px

rpx

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

附：关于 em 和 rem 的区别这篇文章有详解
http://caibaojian.com/rem-vs-em.html