用rem兼容手机端页面

移动端设计稿为750px*1134px:

html {
  font-size: 312.5%;
}

@media screen and (max-width: 359px) and (orientation: portrait) {
  html {
    font-size: 266.67%;
  }
}

@media screen and (min-width: 360px) and (max-width: 374px) and (orientation: portrait) {
  html {
    font-size: 300%;
  }
}

@media screen and (min-width: 384px) and (max-width: 399px) and (orientation: portrait) {
  html {
    font-size: 320%;
  }
}

@media screen and (min-width: 400px) and (max-width: 413px) and (orientation: portrait) {
  html {
    font-size: 333.33%;
  }
}

@media screen and (min-width: 414px) and (max-width: 431px) and (orientation: portrait) {
  html {
    font-size: 345%;
  }
}

@media screen and (min-width: 432px) and (max-width: 479px) and (orientation: portrait) {
  html {
    font-size: 360%;
  }
}

@media screen and (min-width: 480px)and (max-width: 639px) and (orientation: portrait) {
  html {
    font-size: 400%;
  }
}

@media screen and (min-width: 640px) and (orientation: portrait) {
  html {
    font-size: 533.33%;
  }
}

rem与px的转换为1：100，即width：100px===width：1rem