一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
如何区分 px、em、rem、vw 和 vh 单位，这些单位都是我们网页开发中的一个基本单位，而且它们对我们来说非常重要，而且也是我们面试中的一个高频考题。
接下来我们进入我们的内容部分，我们将会从三个方面来给大家介绍 px、em、rem、vw 和 vh。
- px、em rem、vw 和 vh 概念。
- px、em、rem 之间的转换。
- 在面试中如何记忆以及总结口诀。
px、em rem、vw 和 vh 概念
首先我们来看 px、em、rem、vw 和 vh 概念。
-
px：就是 pixel 像素的一个缩写，可以简单理解为网页开发的基本长度单位。
-
em：是一个相对长度单位，相对于当前元素内文本的字体尺寸，根据当前元素的文本的尺寸来进行一个计算的，所以说它是一个相对长度单位。
-
rem：rem 是 CSS3 新增的一个相对单位，基于 HTML 字体元素的大小来决定，通常配合媒体查询，用于解决移动端的一个适配问题。
-
vw 和 vh：vw 和 vh 是相对于适口的长度来进行一个计算的，1vw 即值为适口宽度的 1%，1vh 意味着值为适口高度的 1%。
了解这些概念之后，通过案例进行演示。
案例示意
新建 demo.html 文件，同时分了 4 个 div 块，每个 div 块对应相应的基本单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="demo.css">
<title>如何区分 px、em、rem、vh、vw ?</title>
</head>
<body>
<!-- px绝对长度单位 1px = 1个像素 -->
<div class="px-box">
px-box - 200px
</div>
<!-- 相对长度单位, 相对于当前元素内文本的字体尺寸 -->
<div class="em-box">
em-box - 10em
</div>
<!-- rem是CSS3新增的一个相对单位 ，基于 html 元素的字体大小来决定 -->
<div class="rem-box">
rem-box - 2rem
</div>
<!-- vw 和 vh 是相对于视口的长度单位, 1vw 即值为视口宽度的1%，1vh 意味着值为视口高度的1% -->
<div class="vw-vh-box">
vw-vh-box
</div>
</body>
</html>
新建一个 demo.css 样式文件，用于编写样式。
/* 基础样式 */
* {
margin:0;
padding:0;
}
html {
font-size: 100px;
}
div {
font-size: 20px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 20px;
background:#f1f1f1;
color: #000;
font-weight: bold;
height: 40px;
}
/* 章节内容 */
.px-box {
width: 200px;
background: red;
}
.em-box {
/* 200px */
width: 10em;
background: green;
}
.rem-box {
/* 200px */
width: 2rem;
background:blue;
}
.vw-vh-box {
width: 100vw;
height: 40vh;
background: yellow;
}
在样式部分代码中，分为基础样式和 div 块中样式。
- px-box：设置宽度是 200px，即它的宽度是 200 个单位长度。
- em-box：设置宽度是 10em，10em 是如何计算的呢？它是根据我们当前盒子的一个字体大小来进行一个计算的。比如当前字体大小设置为 20px，所以宽度为 10x20=200px。
- rem-box：设置宽度为 2rem，这个宽度是根据我们当前页面根节点字体大小来进行计算的，根样式设置字体的大小 100px，所以 rem-box 宽度为 2x100=200px。如果根节点它没有给定这个字体大小，也就是这个 html 的字体大小没有给定。在这情况下，它会根据当前浏览器默认的字体大小来计算它的宽度，
- vw-vh-box：设置宽度是 100vw，高度是 40vh。
在浏览器中渲染的结果如所示：
注意：vw 和 vh 一个独立的一个部分，前面三个它们之间存在一个相互转化关系。vw 和 vh 是一个相对独立的一个单位，它是相对于当前浏览器适口来进行一个计算的。
记忆口诀
一绝三相，一绝 px，三相 em、rem、vw+vh。
-
px：是一个绝对单位，是网页开发的基本长度单位。
-
em：是一个相对单位，相对于当前盒子的字体大小进行一个计算。当前盒子的字体大小没有给定，它会根据浏览器默认的一个字体大小来进行一个计算。
-
rem：是一个相对单位，相对于根元素 HTML 字体大小进行一个计算。如果 根元素的字体大小没有给定，它会根据浏览器默认的一个字体大小来进行一个计算。
-
vw 和 vh：它是一个相对单位，相对于我们当前网页适口的宽度和高度进行一个计算的。
这个口诀重点记忆，在面试中，我们可以快速的定位到面试官的考点，并且快速的进行一个回答，这个是我们的一个面试口诀。
