CSS常用单位（px、rpx、em、rem）

1.px（pixel）

不用多说，最常用的单位，也是比较死板的一个单位，在手机端的开发中不受欢迎。

2.rpx（responsive pixel）

小程序中会用到的单位，根据屏幕宽度进行自适应。

规定屏幕宽为750rpx。

如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px（屏幕宽度/750）	px换算rpx(750/屏幕宽度)
iphone5	1px = 0.42rpx	1rpx = 2.34rpx
iphone6	1px = 0.5rpx	1rpx = 2px
iphone6 Plus	1px = 0.552rpx	1rpx = 1.81px

所以：开发微信小程序时建议设计师可以用 iPhone6 作为视觉稿的标准，这样开发时换算单位比较明了！

3.em

表示相对尺寸，相对于当前对象内文本的font-size。

如果当前对象内文本的font-size计量单位也是em，则当前对象内文本font-size的参考对象为父元素文本font-size。

使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，这对开发造成了一定的麻烦，所以em在开发中使用相较于rem来说还是比较少的；

4.rem

rem是相对于根元素html的font-size的属性来计算的。

当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放，

所以我们只需要在html根元素确定一个参考值（font-size），这个参考值设置为多少，完全可以根据您自己的需求来定。

相较于em来说，rem对于开发者来说更友好一点。

为了方便计算，当我们把参考值font-size设置为10px时

px	rem
12	12/10 = 1.2 rem
14	14/10 = 1.4 rem
16	16/10 = 1.6 rem
18	18/10 = 1.8 rem
20	20/10 = 2 rem
22	22/10 = 2.2 rem
24	24/10 = 2.4 rem
26	26/10 = 2.6 rem
28	28/10 = 2.8 rem

因此 1rem 就等于html根元素设定的font-size的px值。

例：

我们设置html { font-size:12px; } , 之后的div宽高都以这个12为基数来换算，

设定一个div｛width：3rem；height：2.5rem；｝

换算成px ： div｛ width：36px；height：30px；｝

这时  1rem = 12px

Q: 那各种型号的手机、ipad屏幕都不一样大，那html的font-size到底应该设为多少好呢？

两种办法：

    1. 利用@media媒体查询屏幕大小来控制html的font-size，以此来达到根据屏幕大小来展示页面的效果

    2. 使用js来控制

//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
(function(designWidth, maxWidth) {
  var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    maxWidth = maxWidth || 540;
    width > maxWidth && (width = maxWidth);
    var rem = width * 100 / designWidth;
    remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
  }
  if (docEl.firstElementChild) {
    docEl.firstElementChild.appendChild(remStyle);
  } else {
    var wrap = doc.createElement("div");
    wrap.appendChild(remStyle);
    doc.write(wrap.innerHTML);
    wrap = null;
  } //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
  refreshRem();
  win.addEventListener("resize", function() {
    clearTimeout(tid); //防止执行两次
    tid = setTimeout(refreshRem, 300);
  }, false);
  win.addEventListener("pageshow", function(e) {
    if (e.persisted) { // 浏览器后退的时候重新计算
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }
  }, false);
  if (doc.readyState === "complete") {
    doc.body.style.fontSize = "16px";
  } else {
    doc.addEventListener("DOMContentLoaded", function(e) {
      doc.body.style.fontSize = "16px";
    }, false);
  }
})(750, 750); //需要根据你的设计稿的大小来调整脚本最后的两个参数。