CSS中的单位

1、px

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

2、em

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

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

 

3、rem

rem 也是相对长度单位，但是该单位相对于 em 就避免了重复计算，因为它相对的就只是HTML根元素。1 rem 也就是HTML根元素的字体大小是多少，则1 rem就是多少。比如 html 的 font-size 为100px，则1 rem就是100px。

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。

（一般来说，750那个值可以设置为设计稿的宽度，比如设计稿宽度为 1080，则上面函数中的 750 就可以改为 1080，这样是为了开发者能直接将设计稿的 px 直接除以 100 即可换算成 rem）

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