一、理論學(xué)習(xí)
1、絕對單位
px： 邏輯像素，絕對單位
2、相對單位
em： 基準(zhǔn)點為父節(jié)點字體的大小
rem： 相對根元素字體大小
vw： 視口寬度， 將視口寬度的1%
vh： 視口高度， 將視口高度的1%
vmin：vw和vh中較小的那個
vmax：vw和vh中較大的那個
二、實踐操作
代碼如下
html部分

<div class="rem">

    </div>
    <div class="em">
        <div class="em_child">

        </div>
    </div>
    <div class="vw">

    </div>

    <div class="vmax">

    </div>

css部分

@function pxtorem($px, $dpr:75) {
    @return $px / $dpr*1rem    //px轉(zhuǎn)rem
}

html {
    font-size: 13px;
}

.rem {
    width: pxtorem(150, 75);
    height: pxtorem(150, 75);
    background: aqua;
}

.em {
    width: 10em;
    height: 10em;
    background: blue;
    /* font-size: 15px; */
}

.em_child {
    width: 5em;
    height: 15em;
    background: coral;
}

.vw {
    width: 10vw;
    height: 10vw;
    background: crimson;
}

.vmax {
     width: 10vmax;
     height: 10vmax;
     background: darkolivegreen;
}

效果如下

image.png