响应式布局： 同一页面在不同的屏幕上有不同的布局，即一套代码自适应不同的屏幕。
常用 单位：
-
像素（px）：像素是最常用的长度单位，它表示屏幕上的一个物理像素点。例如，width: 200px; 表示元素的宽度为200个像素点。
-
百分比（%）：百分比单位相对于父元素的尺寸进行计算。例如，width: 50%; 表示元素的宽度为父元素宽度的50%。
-
em：em单位是相于元素的字体大小计算的。例如，font-size: 1.5em; 表示元素的字体大小为父元素字体大小的1.5倍。 （ 我通常用来做段落缩进 text-indent:2em ）
-
rem：rem单位也是相对于根元素（即html元素）的字体大小计算的。例如，font-size: 1.2rem; 表示元素的字体大小为根元素字体大小的1.2倍。
-
vh和vw：vh和vw单位分别表示视口高度和视口宽度的百分比。例如，height: 50vh; 表示元素的高度为视口高度的50%。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html {
font-size: 20px;
}
.box1 {
font-size: 1rem;
}
.box2 {
font-size: 2rem;
}
.box3 {
font-size: 3rem;
}
</style>
</head>
<body>
<div class="box1">1rem</div>
<div class="box2">2rem</div>
<div class="box3">3rem</div>
</body>
</html>
- rem 除了可用于 font-size 外，还可以用于任意其他表示长度的属性，如 width，height 等
响应式布局的实现
方案一 相对根元素响应 = 媒体查询 + rem
- 使用媒体查询，随屏幕宽度的变化，调整根元素的
font-size - 使用单位 rem
太累了，明天继续，
