绝对单位？相对单位？简单易懂，必读！

绝对单位只有一个

px

相对单位

em:

1em=16px

.box {
        width: 300px;
        height: 300px;
        font-size: 20px;
    } 

    .em {
        width: 10em;
        height: 10em;
        background: pink;
    }
//此时子元素的大小是200px，是怎么得来的呢？
//子元素的宽高等于=设定宽高em *父元素的字体的 大小。
//当父元素的字体大小小于12px的时候，取12px。某些浏览器默认最小的字体大小是12px。

注：

em是相对于父元素的一个单位，它的大小是由父元素的字体大小来决定的，如果没有父元
素，则取决于根元素的字体大小

rem

1em=16px

 html,
    body {
        width: 500px;
        height: 400px;
        background: blue;
        font-size: 20px;
    }
 .rem {
        width: 10rem;
        height: 10rem;
        background: brown;
    }
   //此时子元素的大小是200px，是怎么得来的呢？子元素的宽高等于=设定宽高rem *根元
//素的字体的大小。当父元素的字体大小小于12px的时候，取12px。某些浏览器默认最小
//的字体大小是12px。

rem是由根元素字体大小决定， 不受父元素影响

vw
取决于可视区宽度的百分比

vh
取决于可视区高度的百分比
vmin
根据可视区的宽高，取最小值
vmax
根据可视区的宽高，取最大值

在我们平常的工作里用的最多的就是rem，那么接下来我们封装一个函数来方便调用吧！

 @function pxtorem($aa) {
@return $aa/75*1rem;
}

或者

  @function pxtorem($aa, $bb:75) {
  @return $aa/$bb*1rem;
  }

调用：

.box {
width: pxtorem(200);
height: pxtorem(200);
background: red;
}