手机端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%;
  }
}

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值