手机端h5页面利用rem进行适配的有效方案

关于H5页面的适配方案，有很多很多，各种方法有各种方法的优势。在博主做项目的实际开发过程中，常用的方案是利用rem进行适配。具体的适配原理如下：

需要明确的一点，各种浏览器对字体默认的大小为16px.

通常UI设计师给到前端开发的设计稿是以iphone6 手机大小设计的，前端开发时也是参照iphone页面显示效果进行开发。在开发的前期我们需要对浏览器默认字体的大小进行修改。使得，在页面上设置 1rem 的时候实际上就是对应 10px。

10/16 ＊100% ＝ 62.5%； 因此iphone 6设置如下

/*iphone6 375px*/
@media (min-width: 370px){
  html{
    font-size: 62.5%;
  }
}

举例： iphone6手机屏宽 375px 而 iphone6 plus 为414 px计算iphone 6plus时

414/375 ＊ （10/16）＝ 0.69 因此iphone 6plus设置如下

/*iphone 6plus  414px*/
@media (min-width: 410px) {
  html{
    font-size: 69%;
  }
}

通常我们只需要考虑几个范围内的手机尺寸范围，通常按以下顺序设置即可：

/*iphone 320px*/
@media (min-width: 310px) {
  html{
    font-size: 53.3%;
  }
}
/* 安卓 360px*/
@media (min-width:350px){
  html{
    font-size: 59.12%;
  }
}
/*iphone6 375px*/
@media (min-width: 370px){
  html{
    font-size: 62.5%;
  }
}
/*iphone 6plus  414px*/
@media (min-width: 410px) {
  html{
    font-size: 69%;
  }
}

当然，为了更加精确，你也可以进一步缩小尺寸分辨范围。如果觉得好的话，就给博主点个赞吧。