简单的实现移动端的rem+vw布局

• 首先对视口进行操作

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• 由于设计稿是750*1334的,然后产生了等式。设置根字体为1rem；
  • 750px=7.5rem=100vw；
  • 1rem=13.3333333vw=100px；
    但是这里的

html {
  height: 100%;
  font-size: 50px; // 向下兼容 不止vw时候 写死font-size
  font-size: 13.33333333vw; // 7.5rem === 100vw
  margin: 0 auto;
}


@media (min-width: 560px) { // pc兼容
  html,body {
    font-size: 54px;
    max-width: 540px;
  }
}

@media (max-width: 1024px) { // ipad兼容：ipad最大1024px
  html,body {
    max-width: 1024px;
  }
}