h5基础单位学习(万丈高楼平地起)

一、理论学习
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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容