响应式

rem

基于html的 font-size

<style>
  html {
    font-size: 50px;
    background: white;
  }
  .box {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    p {
      width: 1rem;
      height: 1rem;
      background: black;
    }
  }
</style>
<div class="box">
  <p></p>
</div>
1rem = 50px

vw/vh

视口的宽度/高度

<style>
  html {
    background: white;
  }
  p {
    margin: 0;
    width: 50vw;
    height: 50vh;
    background: red;
  }
</style>
<p></p>

50vw/vh 等于视口(viewport 可视区域)的50%