前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍单位em/px/rem/vh/vw区别。
一、介绍
CSS单位 | |
---|---|
相对长度单位 | em , ex , ch , rem , vw , vh , vmiin , vmax , % |
绝对长度单位 | cm , mm , in , px , pt , pc |
二、详细介绍
- px : 最常用的单位,像素,虽然移动端存在设备像素比,px实际显示的大小不确定,但是px的大小和其他属性无关,因此还是被认为是绝对长度单位。
- em:相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸为被人设置,则相对于浏览器的默认字体尺寸(16px)
<style>
.big {
font-size: 28px;
}
.small {
font-size: 0.8em;
}
</style>
<body>
<div class="big">
我是正常大小。
<div class="small">
我是小字。
</div>
</div>
</body>
3. rem:相对HTML根元素的font-size的值。
<style>
.big {
font-size: 28px;
}
.small {
font-size: 0.8em;
}
.rem {
font-size: 0.8rem;
}
</style>
<body>
<div class="big">
我是正常大小。
<div class="small">
我是小字。
</div>
<div class="rem">
我是rem小字。
</div>
</div>
</body>
4. vh、vw : vw就是把窗口宽度分为100等份,100vw表示满宽,50vw表示一半宽。同理,vh为窗口的高度。
<style>
.smallbox {
width: 20vw;
height: 20vh;
background-color: pink;
}
.bigbox {
width: 40vw;
height: 50vh;
background-color: blue;
}
</style>
<body>
<div class="smallbox"></div>
<div class="bigbox"></div>
</body>
三、总结
px : 像素,绝对单位;
em : 相对父节点的字体大小;
rem : 相对于根节点;
vh vw:相对于页面高度宽度。