em、rem、vh和vw单位的区别与使用场景

em、rem、vh和vw单位的区别与使用场景

em与rem之间的区别

em与rem是代码中字体大小，长度大小的单位，
em设置根元素字体大小，如果需要根据根元素改变的元素，大小长度单位需要用rem
如下代码所示：
html { font-size: 0.75em; }
.panel { padding: 1rem;}
一下为用em和rem的实例：

<style type="text/css">
      html {
        font-size: 1.25em;
      }
      .btn {
        /* display: grid; */
        width: 10em;
        height: 2em;
        line-height: 2em;
        background-color: lightpink;
        text-align: center;
        /* border: solid 1px #000; */
        /* margin-top: 1em; */
        outline: none;
        border-radius: 0.3em;
        box-shadow: 0 0 3px lightpink;
        color: white;
      }
      /* 根据响应式布局来改变按钮大小 */
      .small {
        font-size: 12px;
      }
      .normal {
        font-size: 16px;
      }
      .largar {
        font-size: 20px;
      }
      .btn:hover {
        cursor: pointer;
        opacity: 0.8;
        /* 延迟变色 */
        transition: 0.3s;
      }
    </style>

<button class="btn small">btn1</button>
    <button class="btn normal">btn2</button>
    <button class="btn largar">btn3</button>

执行结果如下：

vh与vw

  vw：可视宽度的百分之一（1/100）vh：可视高度的百分之一（1/100）vh与vw也是用在可响应式布局当中，只作为单位 ；
  也有vmax和vmin，这两个单位的做用固定形状时用列如固定正方形，不管可视宽度和高度怎么改变 ，固定形状不变；
  最小宽度和最小高度 都是按照百分比给的，会随可视窗体大小改变而改变,最大宽度和最大高度都是按照百分比给的,可视窗体变大会变大，窗体缩小到最大宽度是不会再缩小 。
实例代码如下：

 <style>
      html {
        font-size: 1.25em;
      }
      /*.squire {
        width: 20vw;
        height: 20vh;
        background-color: lightpink;
      }*/
      .squire {
        width: 20vmax;
        height: 20vmax;
      }

<div class="squire"></div>
执行结果如下所示：