在自适应布局或者移动端网页开发时，我们经常会用到em和rem两个长度单位。接下来我们讨论一下这两个单位和px之间的区别，以及他们的使用场景等。

px

px，像素(计算机屏幕上的一个点)。

像素（Pixels），相对长度单位，它是相对于显示器屏幕分辨率而言的，它兼容性好而且精确，但是这种方法当用户在缩放浏览器或者需要兼容不同移动设备时，我们的页面布局可能会被打破。

em

em为了解决上述问题而进化产生，也是相对长度单位，根据使用它的元素的大小决定（有人误以为是根据父元素，那是因为使用它的元素继承了父类的属性，根据W3C标准可知，它们是基于当前对象元素的字体大小），它可以自动适应用户所使用的字体。

em，相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

关于em值的计算

假设任意浏览器的默认字体大小都是16px。所有未经调整的浏览器中都是1em=16px。为了方便换算，我们通常在css中设置body的属性 font-size:62.5%，这就使1em值变为10px,这样我们就可以把设计稿的px值除以10，然后换上em作为单位来进行px和em的换算，十分简单，例如16px可以改写为1.6em。

rem

由于em值不是固定的，1em在不同元素下的值会因为该元素或者该元素父元素的大小不同而不同，因此在我们多次使用时，就会带来开发的难度。这时候rem(root em)应运而生了。rem是相对于根(html)元素，这就意味着，我们只需要根据自己的需要给根元素确定一个参考值，然后通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。最大的优点是提供一致尺寸，便于计算。

rem，相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。

根元素重写

em 和 rem 单位之间的区别是浏览器根据谁来转化成px值,em是基于当前对象内文本的字体尺寸决定，rem是基于html元素的字体大小来决定，而根(html)元素的字体大小如果没有显式地设置固定值去覆盖，那么它首先来自浏览器设置，因此浏览器的字体大小设置可以影响每个使用rem单元以及每个通过em单位继承的值。为了还原设计稿和实现合理的布局所以需要根元素重写。浏览器缩放动态修改根元素大小可以参考以下代码段。

<script>
    var timer, style = document.head.appendChild(document.createElement("style"));
    var useREM = window.useREM = Object.create({
      resize: function () {
        var config=this.config;
        this.size=Math.max(config.min, Math.min(config.max, document.documentElement.clientWidth)) / config.num;
        style.innerHTML="html{font-size: "+ this.size +"px !important;}"
        return this;
      },
      set: function (newConfig) {
        if(newConfig){
          for (var a in newConfig){
            if(this.config.hasOwnProperty(a)){
              this.config[a]=newConfig[a];
            }
          }
        }
        this.resize();
        return this;
      }
    }, {
      size: {
        value: 20,
        writable: true,
        configurable: false,
        enumerable: true
      },
      config: {
        value:{
          max: 1200,//设置最大可视区宽
          min: 900,//设置最小可视区宽
          num: 10,//根据需求调整比例
          delay: 100
        },
        writable: false,
        configurable: false,
        enumerable: true
      }
    });

    addEventListener("resize", function () {
      clearTimeout(timer);
      timer = setTimeout(this.resize.bind(this), this.config.delay);
    }.bind(useREM));

    useREM.set();
    </script>

同时，也有人认为这种做法在一定程度上剥夺了用户对浏览器字体设置的权利，他们的观点是rem的好处是给了我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小，无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。这个就暂不做讨论吧，日后有机会再讲。