移动端rem适配的js

移动端适配都用的时rem来做,在你的项目中只需要引用下面的js,即可适配成功。代码时已iphone6来做的,font-size为100px,即用 .16rem=16px(iphone6下)

// 摘要:控制不同尺寸屏幕上的rem基准单位
// 以iPhone6位基准 375px 最大适配432px 屏幕
var maxAdaptation = 432
document.addEventListener('DOMContentLoaded', function () {
  var deviceWidth = document.documentElement.clientWidth > maxAdaptation ? maxAdaptation : document.documentElement.clientWidth
  document.documentElement.style.fontSize = (deviceWidth / 3.75) + 'px'
  var funID
  window.onresize = function () {
    clearTimeout(funID)
    funID = setTimeout(function () {
      var deviceW = document.documentElement.clientWidth > maxAdaptation ? maxAdaptation : document.documentElement.clientWidth
      document.documentElement.style.fontSize = (deviceW / 3.75) + 'px'
    }, 500)
  }
}, false)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 了解真实的『REM』手机屏幕适配rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。 使用...
    张宪宇阅读 2,279评论 0 5
  • rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在...
    Www刘阅读 2,306评论 2 9
  • 五莲县 实验小学 五年级10班 李阳 好书,能开阔我们的视野,能让我们得到知识,也能让我们放飞想象,我觉得...
    军凯阳阅读 328评论 0 1
  • 今天是周末,可杨晨五点钟就醒了。 身旁的女友睡得正香,一粒眼屎粘在眼角,但她看上去还是那么可爱。他轻轻替她抹掉脏东...
    玫瑰病了阅读 670评论 1 14
  • 刷完《黑豹》,在身边一群黑人脸盲患者不知所云时,感叹多年看球经验竟然还有这等好出。虽然偶尔也会跳戏,不过总...
    憨勺阅读 247评论 0 1