理解em、rem、vh、vw

1.em

em就相当于“倍”，相对于该元素的父元素的字体大小进行缩放，如父元素的字体大小为14px，子元素字体大小为1.2em，显示出来的就是16px。

2、rem

r是root的缩写，相对于根节点的字体大小进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

3、vh

vh就是当前屏幕可见高度的1%，也就是说

height: 100vh == height: 100%;

但是有个好处是当元素没有内容时候，设置height: 100%该元素不会被撑开，

但是设置height:100vh，该元素会被撑开屏幕高度一致。

3、vw

vw就是当前屏幕宽度的1%

补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，

但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况。

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <title>理解em、rem、vh、vw</title>
</head>
<style type="text/css" media="screen">
html{
    font-size: 14px;
}
body {
    /* padding: 0;
    margin: 0; */
}
.em,
.em > .em-son,
.em > .em-son > .em-grandson {
    font-size: 1.2em;
}
.rem,
.rem > .rem-son,
.rem > .rem-son > .rem-grandson {
    font-size: 1.2rem;
}
.rem-box {
    background: #d60b3b;
    width:10rem;
    height: 10rem;
    color: #fff;
    text-align: center;
    line-height:5rem;
}
.vhvw-box {
    background: #d60b3b;
    width: 50vw;
    height: 50vh;
    color: #fff;
    text-align: center;
    line-height: 25vh;
}
</style>
<body>
    <h1>html字体大小为14px</h1>
    <br>

    <h1>em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化</h1>
    <div class="em">
    字体大小 1.2 * 14（父元素body） = 16px
        <div class="em-son">
        字体大小 1.2 * 16(父元素em) = 20px
            <div class="em-grandson">
            字体大小 1.2 * 20(父元素em-son) = 24px
            </div>
        </div>
    </div>
    <br>

    <h1>rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化</h1>
    <div class="rem">
    字体大小 1.2 * 14（根节点html） = 16px
        <div class="rem-son">
        字体大小 1.2 * 14（根节点html） = 16px
            <div class="rem-grandson">
            字体大小 1.2 * 14（根节点html） = 16px
            </div>
        </div>
    </div>
    <br>

    <h1>rem 也可作为固定长度单位设置宽高等</h1>
    <div class="rem-box">
        宽：14 * 10 = 140px<br>
        高：14 * 10 = 140px
    </div>
    <br>
    <h1>vh,vw 屏幕可见区域的高度，宽度的1%</h1>
    <div class="vhvw-box">
        宽：屏幕宽度的50%<br>
        高：屏幕高度的50%
    </div>
    <br>

<!-- 父元素width：100%时，子元素width：50vw比50%宽

　　　　　　是因为50%是相对父元素宽度，50vw相对屏幕可见宽度。可先去除父元素的默认margin、padding这样 50% == 50vh -->

    <div style="width: 100%;height: 300px;background: red;">
        <div style="width: 50vw;height: 50vh;background: yellow;"></div>
        <div style="width: 50%;height: 50vh;background: blue;"></div>
    </div>
</body>
</html>

理解em、rem、vh、vw

猜你喜欢