vw结合rem布局

dpr物理像素比：设备像素 （设计图的像素 640px等）/ 逻辑像素（CSS像素，在调试窗口看到的 320px等）
dpr = 设计图的640 / 逻辑像素 320 = 2
因此假如你在ps量取到的88px，它的逻辑像素为 88 / 2 = 44px
然后根据html中的字体大小（通过媒体查询控制），有着
@media all and (max-width:320px){ html{font-size:12px}}
@media all and (min-width:321px) and (max-width:375px){ html{font-size:14px}}
所以 它的rem值为 =》 44px / 12px = 3.67rem
由于这些除法有着大约值，因此大小有着出入，因此引出了vw结合rem布局

rem是跟随html的字体大小变化而变化的
假如html的字体大小为12px，证明1rem=12px

1vw = 1% 的视口宽度
100vm = 100% 的视口宽度

（1）：rem与vw的推理

      1vw  == 视口的宽度 1% 100vw == 100%
      1vh  == 视口的高度 1%  100vh == 100%

      设计图为640px 750px 1080px 
      其中dpr为2  2   3
      
      假如设计为750px为例子：
        那么750 / 2 = 375px  ---也就是调试窗口看到逻辑像素--也就是视口完整为375px
        所以啊 375px = 100vw 
        推出 100px = 26.67vw （给html设置为26.67vw也就是100px,为何不直接，因为vw可变，px直接固定了）
        因此需要把750px设计图为标准，给html的文字大小设置为26,67vw（也就是100px），那么在375px的调试窗口下显示的88px（ps量取的）下为44px，在320px之中，显得小一些，在比375px大的显得大一些，这就是所谓的适配。

        那么640的设计图时候 
        640px / 2 = 320 px；
        100 vw = 320px;
        最后推出==》  100px = 31.25vw
        由于rem的值是 1rem = html文字大小的值（这边设置的100px = 31.25vw)
        那么也就是说，你在ps量取到的值假如为88px  drp为2
        88px / 2 = 44px
        44px / 100 = 0.44rem;

注意点：文字大小的话，则需要通过媒体查询来控制其大小，这是通过具体的标签来修改的，比如@media all and (max-width:320px) { header{font-size:14px}}

（2）：大体的实现rem结合vw实现布局

HTML

  <header>文本</header>
  <nav>我是</nav>
  <main></main>
  <footer></footer>

CSS

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    html {
      font-size: 26.67vw;
    }

    header {
      height: 0.44rem;
      background: yellow;
    }

    nav {
      height: 0.38rem;
      background: pink;
    }

    main {
      flex: 1;
    }

    footer {
      height: 0.44rem;
      background: pink;
    }

    @media all and (max-width: 320px) {

      header,
      nav,
      main,
      footer {
        font-size: 12px;
      }
    }

    @media all and (min-width: 321px) and (max-width: 375px) {

      header,
      nav,
      main,
      footer {
        font-size: 14px;
      }
    }
  </style>