em、rem和px的实用场景以及vw、vh的初体验 -

1、em、rem与px的实用场景

1.1 在html代码中，使用较多的单位是相对单位em、rem以及固定单位px。他们的实用场景分别是：

1、em：通常用于依赖字号的元素属性上，比如margin、padding、winth、height等元素；
2、rem：root em的缩写，通常用于font-size字号的设置上；
3、px：通常用于边框宽度border的设置上。

1.2 在html代码中，rem只会随着root根元素的大小来改变；而em是随着它的父级来改变，所以使用中是多加注意。

下面用一段代码来演示：

<head>
    <meta charset="utf-8" />
    <title>123</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
      }
      :root,
      ::after,
      ::before {
        background-color: #eee;
        box-sizing: border-box;
      }
      header {
        background-color: #0072b0;
        color: #ffffff;
        border-radius: 0.5em;
        border: 2px solid red;
      }
      .box1,
      .box2 {
        background-color: #cccccc;
        border-radius: 1em;
        padding: 1em;
        /* float: left; */
        margin-top: 1em;
        display: table-cell;
      }
      .box1 {
        width: 70%;
        height: 30vh;
      }
      .box2 {
        width: calc(30% - 1em);
        margin-left: 1em;
      }
      .continal {
        display: table;
        width: 100%;
        border-spacing: 1.5em 0;
      }
      .box3 {
        margin-left: -1.5em;
        margin-right: -1.5em;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>woaiasdasdas</h1>
    </header>
    <div class="box3">
      <div class="continal">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>
    </div>
  </body>

2、vw、vh的初体验

在响应式布局中还有一些不能忽略的元素属性，那就是vw、vh以及vmin、vmax。它们常用于移动端的布局之中。

1、vw：表示视口的宽度，1vw就表示当前视口宽度的百分之一；
2、vh：表示视口的高度，1vh就表示当前视口高度的百分之一；
3、vmin：表示在vw与vh中取最小值；
4、vmax：表示在vw与vh中取最大值。

下面用一段代码用vw与vh来演示一个三行单例的色块：

<head>
    <meta charset="utf-8" />
    <title>123</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
      }
      :root,
      ::after,
      ::before {
        background-color: #eee;
        box-sizing: border-box;
      }
      .box4,
      .box5,
      .box6 {
        width: 50vw;
      }
      .box4 {
        background-color: blue;
        height: 25vh;
      }
      .box5 {
        background-color: chartreuse;
        height: 25vh;
      }
      .box6 {
        background-color: brown;
        height: 25vh;
      }
    </style>
  </head>
  <body>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
  </body>