理解CSS常见的px/em/rem/vh/vw尺寸单位

最近在做手机端和PC端的项目，想到了CSS单位的问题，于是想着空下来把CSS单位部分的知识自己写写梳理一下；

CSS中常见的单位

• px–最常见的，页面按照精准样式展示;属于绝对单位；
• em–基准点为父节点字体的大小，如果自身定义了font-size按自身来计算；也就是说这个em不是一个固定值，属于相对单位；
• rem–相对单位，r可以看作为 ”root“,结合em，理解为相对根节点HTML的字体大小来计算；
• vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
• vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
• vmin：vw和vh中较小的那个。
• vmax：vw和vh中较大的那个。
• %:百分比
• …

PX

px是常见的，页面按照精准样式展示，常用于确定了模块固定宽高的样式书写中；

em

css如下：

.father-div{
    font-size: 16px;
}
.son{
    font-size:3em;
}

div如下：

<div class="father-div">
    这是父级字体大小测试
    <div class="son">这是子级字体大小测试</div>
</div>
</