一、理論學習
1底哗、絕對單位
px： 邏輯像素常熙，絕對單位
2、相對單位
em： 基準點為父節(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
