目录
一、px像素单位
二、rem单位
三、vw和wh单位
一、px像素单位
px单位是绝对单位，一般用于pc端网页开发。因为是绝对单位所以在移动端上的使用体验并不是很好
举例：
代码
<!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>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>pc端
移动端
px单位在pc端都是200px，并没有随着屏幕尺寸而变换
二、rem单位
rem它是描述相对于当前根元素字体尺寸，是相对单位。它可以根据根元素的变换而变换，根元素一般指的是html的font-size，默认值是1rem=16px
举例：
代码
<!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>
div {
width: 5.3333rem;
height: 5.3333rem;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>pc端：
手机端：
rem单位是相对单位所以可以很好的适配手机端
三、vw和wh单位
vw跟wh单位是指相对于视口的宽度视口的宽度或者高度的长度单位。1vw为视口宽度的百分号之一，1vh为视口长度的百分之一。vw跟vh是根据视口尺寸而变化的所以常用于手机端。vw跟wh不能同时作用与一个元素上
举例：
代码
<!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>
div {
width: 26.6667vw;
height: 26.6667vw;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>手机端：
这是vw的举例说明而vh也是如此，盒子的vw单位没变但是随着手机屏幕大小发生改变，盒子的大小也发生了改变。
