unit —— em / rem / vh / vw

html,body{margin:0; padding:0; font-size:14px; }

/*em 继承父元素的字体大小，来变大或变小，多层嵌套字体变化*/
.em,
.em > .em-son,
.em > .em-son > .em-grandson {font-size: 1.2em;}

/*rem 继承根节点元素的字体大小，来变大或变小，多层嵌套字体不变化*/
.rem,
.rem > .rem-son,
.rem > .rem-son > .rem-grandson {font-size: 1.2rem;}

/*rem 也可作为固定长度单位设置宽高等*/
.rem-box {
width:10rem;
height: 10rem;
line-height:5rem;
text-align: center;
color: #fff;
background: #d60b3b;
}

/*vh,vw 屏幕可见区域的高度，宽度的1%*/
.vhvw-box {
width:50vw;
height: 100vh;
line-height:25vh;
text-align: center;
color: #fff;
background: #d60b3b;
}

<body>

<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>

</body>

来源：https://www.cnblogs.com/jiunie/p/11340319.html

标签

rem