CSS 【详解】响应式布局（明天内容）

响应式布局：同一页面在不同的屏幕上有不同的布局，即一套代码自适应不同的屏幕。

常用单位：

像素（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>