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

设置了父级为16px;子级为2em,则子级字体会比父级大一倍；

• 思考：Chrome浏览器默认最小字体为12px;如果我父级设置12px.子级设置0.5em，字体大小会不会是6px呢；

  • 答案测试后之后是不会的；

• 思考：Chrome如何设置小于12px的字体呢

  • transform: scale(0.5); 使用缩放进行控制

rem

css

html{
    font-size:32px;
}
.father-div{
    font-size: 16px;
}
.son{
    font-size:2rem;
}

设置了根元素为32px;子级使用2rem，父级16px；最后效果为子集以根元素的大小为相对像素显示为64px；

---

思考：响应式布局我们就可以写上不同的媒体查询，做到字体的响应式

@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

VM & VH

最近在大屏开发中用这个属性比较多；设置一个div响应式的铺满整个可视窗体，以前我会这么写：

html,
body {
    height: 100%;
    margin:0;
    padding:0;
}

.div{
    width: 100%;
    height: 100%;
    background: #000;
}

必须设定好父节点100%，需要铺满的div才能让height: 100%;起作用；
于是在大屏开发中，我就使用到了vh和vm的单位；只需要这么写：

.div-all {
    width: 100vw;
    height: 100vh;
    background: #000;
}

大屏中，有时候div直接需要相隔像素，于是可以使用CSS3新增的计算函数进行像素的计算，也是非常方便：

calc(100vh - 10px)  表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px)   表示整个浏览器窗口宽度减去10px的大小

vmax & vmin

有一个1000px（宽）和800px（高）的视窗(Viewport)；

• vmin——vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式，所以50vim = 400px。
• vmax——大尺寸的百分比。50vmax = 500px。

%

百分比则表示当前以父级为相对大小的百分比；