一、rem
rem是相对长度单位。是根元素(html)的font-size值的的一个css单位
html{
font-size:16px;
}
div{
font-size:1rem; // 16px
}
p{
font-size:2rem; // 32px
}
二、em
em是相对长度单位。是父元素的font-size值的的一个css单位
<!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">
<title>Document</title>
<style>
.box {
font-size: 16px;
}
.box_chi_1 {
/* 16px */
font-size: 1em;
}
.box_chi_2 {
/* 32px */
font-size: 2em;
}
</style>
</head>
<body>
<div class="box">
<div class="box_chi_1">box_chi_1</div>
<div class="box_chi_2">box_chi_2</div>
</div>
</body>
</html>
三、vw
视窗宽度,1vw等于视窗宽度的1%。
<!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">
<title>Document</title>
<style>
.box {
/* 当视窗宽度宽度为1000 10vw为100px */
width: 10vw;
height: 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
总结
rem和em都是相对单位
rem相对于html绕开了复杂的层级关系
em相对父麻烦
vw可视窗口1%