px
px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的
em
相对长度单位，相对于父元素的font-size变化而变化。相当于“ 倍” ，比如设置当前的 div 字体大小为 1.5em，则当前的 div 的字体大小为：当前 div 父级的字体大小*1.5 倍。
特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小
代码示例：
<style>
.emFather{
font-size: 20px;
}
.emFather p{
font-size: 1.5em;
}
.emFather .emChild{
font-size: 1.5em;
}
.emFather .emChild span{
font-size: 0.5em;
}
</style>
<div class="emFather">
父级字体大小：20
<p>p标签字体大小：30</p>
<div class="emChild">
child字体大小：30
<span>span标签字体大小：15</span>
</div>
</div>
rem
相对长度单位，相对于根元素（ 即 html 元素）font-size 的倍数， 不会被它的父元素影响。这里的 r 是 root 的意思，就是相对于根节点来进行缩放。
html{
font-size: 20px;
}
.remFather{
font-size: 30px;
}
.remFather p{
font-size: 1rem;
}
<html>
根元素字体大小：20
<div class="remFather">
父级字体大小：30
<p>p标签字体大小：20</p>
</div>
</html>
vw和 vh
vw、vh、vmax、vmin这四个单位都是基于视口
vw（Viewport Width）和vh（Viewport Height） 是相对视窗的宽度和高度而定的，相当于屏幕宽度和高度的 1%。1 个 vw 相当于页面宽度的 1%，比如页面宽度是 1000px，那么 1vw就是 10px，vh 同理。
vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值。vmin：选取vw和vh中最小的那个，vmin：选取vw和vh中最小的那个
如果浏览器的高为300px、宽为500px，那么1vh就是300/100px=3px，1vw就是50/100px=5px，1vmin就是3px，1vmax就是5px；
如果浏览器的宽为800px，高为1080px，那么1vw就是800/100px=8px，1vh就是1080/100px=10.8px，1vmin就是8px，1vmax就是10.8px；。
网友评论