0. px : 绝对单位，页面按精确像素展示
1. em ：相对于父级的倍数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Unit</title>
</head>
<style>
body{
font-size: 10px;
}
.unit-01{font-size: 1.2em;}
.unit-01-1{font-size: 1.2em;}
</style>
<body>
<!-- 相对于父级的 1.2倍 -->
<div class="unit-01">
<!-- 12px = 10px * 1.2 -->
cynthia娆墨旧染
<div class="unit-01-1">
<!-- 14.4px = 12px * 1.2-->
cynthia娆墨旧染
</div>
</div>
</body>
</html>
2. rem ：相对于根root的倍数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rem</title>
</head>
<style>
body{
font-size: 10px;
}
.unit-1{
font-size: 1.2rem;
}
.unit-1-1{
font-size: 1.2rem;
}
.unit-2{
font-size: 1.8rem;
}
</style>
<body>
<div class="unit-1">
<!-- 12px -->
cynthia娆墨旧染
<div class="unit-1-1">
<!-- 12px -->
cynthia娆墨旧染
</div>
</div>
<div class="unit-2">
<!-- 18px -->
cynthia娆墨旧染
</div>
</body>
</html>
3. vw : viewpoint width 视窗宽度。1vw = 视窗宽度的1%
vh : viewpoint height 视窗宽度。1vh = 视窗高度的1%
vmin : vw 和 vh 中较小的那个
vman : vw 和 vh 中较大的那个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
border: 0;
}
.unit-1{
height:50vmin;
50vmin;
background: red;
float: left;
}
.unit-2{
height:50vmin;
50vmin;
background: blue;
float: left;
}
</style>
<body>
<div class="unit-1">
<!-- 较小的是宽 所以是宽的50% -->
</div>
<div class="unit-2">
<!-- 50% -->
</div>
</body>
</html>
4. %
5. pt : point 大约1/72寸
6. pc : pica 大约6pt 1/6寸
7. ex : 相当于0.5的1em
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body{
font-size: 24px;
}
.unit-1{
font-size: 1ex;
}
</style>
<body>
<div class="unit-1">
<!-- 12px -->
cynthia娆墨旧染
</div>
</body>
</html>