细说em-rem-vh-vw-vmin-vmax

1.细说 em，rem

属性	值	注释
em	允许被继承的	响应式的文本，一般 em 定义元素大小
rem	定义字号	互不影响

2.一组 button 案例

<button class="btn small">小型</button>
<button class="btn in">中型</button>
<button class="btn big">大型</button>

   <style>
      /* html {
        font-size: 10px;
      } */
      .btn {
        background-color: #1e9fff;
        color: #fff;
        /* 边框取消 */
        border: none;
        /* 轮廓属性取消 */
        outline: none;
        /*两值上下左右 三值，四值上右下左 */
        padding: 0.5em 1em;
        border-radius: 0.3em;
      }
      .btn:hover {
        /* 透明度 */
        opacity: 0.8;
        /*将鼠标设置为手型 */
        cursor: pointer;
        /* 设置阴影左右，上下，阴影半径，颜色 */
        box-shadow: 0 0 3px red;
        /* 过度时间 */
        transition: 0.3s;
      }
      .small {
        font-size: 10px;
      }
      .in {
        font-size: 16px;
      }
      .big {
        font-size: 22px;
      }
    </style>

3.媒体查询响应式案例

 <div class="panel">
      <h2>嫦娥五号成功返回地球后，世界各国态度大不同</h2>
      <div class="panel-body">
        <p>
          综合外媒报道，中国“嫦娥五号”返回器携带月球表面土石样本于当地时间星期四12月17日凌晨，成功在内蒙古四子王旗预定区域安全着陆。而上一次人类将月球样本带回地球还是40多年前，中国也成为全球第三个实现月球采样返回能力的国家。世界各个航天大国对此反应不一，有的点赞祝贺，有的毫无表示，还有的阴阳怪气
        </p>
      </div>
    </div>
  </body>

html {
  font-size: 12px;
  /* font-size: 0.75em; */
}
.panel {
  border: 1px solid #999;
  padding: 1em;
  border-radius: 0.5em;
  background-color: #eee;
  margin: 5em;
}
.panel h2 {
  font-size: 1.2rem;
  margin: 1em 0;
}
.panel p {
  /* 1.1rem = 13.2px = 12 * 1.1 */
  font-size: 1.1rem;
  /* 首行缩进2行 */
  text-indent: 2em;
  line-height: 2;
}
/* 屏幕宽度 >= 1000px, 字号放大到14px */
@media screen and (min-width: 800px) {
  html {
    font-size: 0.875em;
  }
  .panel {
    background-color: wheat;
  }
}
/* 屏幕宽度 >= 1000px, 字号放大到16px */
@media screen and (min-width: 1000px) {
  html {
    font-size: 1em;
  }
  .panel {
    background-color: lime;
  }
}
/* 屏幕宽度 >= 1200px, 字号放大到20px */
@media screen and (min-width: 1200px) {
  html {
    font-size: 1.25em;
  }
  .panel {
    background-color: lightskyblue;
  }
}

4.视口单位 vw，vh,vmin,vmax

vw/vh/vmin/vmax 是视窗单位，也是相对单位。
视窗是浏览器实际显示内容的区域。
vw：视窗宽度百分比；
vh：视窗高度百分比；
vmin：当前 vw 和 vh 中较小的一个值；
vmax：当前 vw 和 vh 中较大的一个值；
vmin、vmax 的作用：在做移动端页面开发时，会使得文字大小在横竖屏下保持一致。

<div class="box"></div>

 .box {
        background-color: lime;
        width: 50vw;
        height: 50vh;
        margin: auto;

.box {
  /* 这两个只选用一个即可要么基于视窗最大要么基于视窗最小 */
  /* width: 80vmin;
   height: 80vmin; */
  width: 80vmax;
  height: 80vmax;
  background-color: lime;
  margin: auto;
}