h5基础单位学习（万丈高楼平地起）

一、理论学习
1、绝对单位
px： 逻辑像素，绝对单位
2、相对单位
em： 基准点为父节点字体的大小
rem： 相对根元素字体大小
vw： 视口宽度， 将视口宽度的1%
vh： 视口高度， 将视口高度的1%
vmin：vw和vh中较小的那个
vmax：vw和vh中较大的那个
二、实践操作
代码如下
html部分

css部分

@function pxtorem($px, $dpr:75) {
    @return $px / $dpr*1rem    //px转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