絕對單位只有一個

px

相對單位

em:

1em=16px

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

    .em {
        width: 10em;
        height: 10em;
        background: pink;
    }
//此時子元素的大小是200px，是怎么得來的呢？
//子元素的寬高等于=設(shè)定寬高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，是怎么得來的呢？子元素的寬高等于=設(shè)定寬高rem *根元
//素的字體的大小。當父元素的字體大小小于12px的時候，取12px。某些瀏覽器默認最小
//的字體大小是12px。

rem是由根元素字體大小決定， 不受父元素影響

vw
取決于可視區(qū)寬度的百分比

vh
取決于可視區(qū)高度的百分比
vmin
根據(jù)可視區(qū)的寬高，取最小值
vmax
根據(jù)可視區(qū)的寬高，取最大值

在我們平常的工作里用的最多的就是rem，那么接下來我們封裝一個函數(shù)來方便調(diào)用吧！

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

或者

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

調(diào)用：

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