前端H5移动端自动适配

最新推荐文章于 2025-05-09 18:39:49 发布

heart °

最新推荐文章于 2025-05-09 18:39:49 发布

阅读量666

点赞数

CC 4.0 BY-SA版权

分类专栏： H5 文章标签： html5

本文链接：https://blog.csdn.net/heartcnc/article/details/109140204

H5 专栏收录该内容

7 篇文章

订阅专栏

rem布局

使用 js 动态设置 font-size

原理：动态设置html根元素的font-size，其大小实际上是可视界面中宽度的1 / 10。

js代码如下：

// REM布局
function setFontSize() {
  var _document = document,
    _documentElement = _document.documentElement,
    html = _document.getElementsByTagName('html')[0],
    width = _documentElement && _documentElement.clientWidth && _documentElement.clientWidth ||
    window.innerWidth && window.innerWidth ||
    _document.body.clientWidth
  // 1rem = 浏览器的1/10宽
  _documentElement.style.fontSize = width / 10 + 'px'
}!(function () {
  setFontSize()
  window.addEventListener('resize', function () {
    setTimeout(function () {
      setFontSize()
    }, 16)
  })
})()

rem+vw布局

下面以设计稿为750px为基准设置css以适配移动端：

html {
  font-size: 20vw
}

@media screen and (max-width:320px) {
  html {
    font-size: 64px
  }
}

@media screen and (min-width:540px) {
  html {
    font-size: 108px
  }
}

下面设置body可以使H5在浏览器中限制宽度。

body {
  margin: 0 auto;
  max-width: 540px;
  min-width: 320px;
}