CSS中的单位

1、px

绝对单位，页面按精确像素展示

2、em

em 是相对长度单位，是相对于字体大小这个属性来计算的。参考的是父节点字体的大小，如果自身定义了字体大小 font-size 则参考自身的字体大小，如果父节点和本身都没有定义字体大小，则参考浏览器默认字体大小，浏览器的默认字体大小是16px。

整个页面内1em不是一个固定的值。

比如说：可以在body标签声明 font-size: 62.5%；body下的子元素比如 div 如果声明 1em ，则宽度为 10px，该 div 下的 span 字体大小声明为 font-size: 0.5em ，则此时span的字体大小是基于div的，16*62.5*1*0.5 = 5px

3、rem

rem 也是相对长度单位，但是该单位相对于 em 就避免了重复计算，因为它相对的就只是HTML根元素。

html 中的所有标签样式凡是涉及到尺寸的（如： height,width,padding,margin,font-size。甚至，left,top等）都可以用 rem 作单位。

html {
  font-size: 62.5%;  //这里设置的是相对于设备的宽度的大小，也可以直接设置像素
}
/* 直接设置像素 */
html {
   font-size: 10px;
}

div {
  font-size: 1rem;
  width: 10rem;
}
span {
  font-size: .5rem;
}

 3.1、rem适配方案（设置不同屏幕的rem表示不同的值）

3.1.1、用 JS 来适配

用 JS 代码来调整页面的根文档的 font-size ，由此不同大小的屏幕的 1rem 的表示不同的值。

可以在代码的 head 标签里添加下面的 JS 代码：

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',   //屏幕宽度改变事件
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);    //监听屏幕改变事件，一旦改变，触发recalc方法，修改根文档的font-size
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); 

由上面代码可知，当屏幕大小不一样时，页面的根元素 html 的 font-size 属性也会不同，即 1rem 表示的值也会不同。

比如当屏幕宽度为 750px 时，此时 html 的 font-size 为 100 px，这也就代表着此时 1rem 表示 100px，由此你可以根据页面设计图来用 rem 单位来表示你的元素的大小。我们可以将设计图调整为 750px 宽度，就可看到元素在宽度为 750px 时的大小，此时就可以用 rem 来表示元素大小。比如某 div 在750px 屏幕时宽度为 100px，高度为 300px，则可以将它的宽度设为 1rem，高度设为 3rem。

其他适配方法参考：https://www.cnblogs.com/superlizhao/p/8729190.html