一、理论学习
1、绝对单位
px： 逻辑像素，绝对单位
2、相对单位
em： 基准点为父节点字体的大小
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转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
