【笔记】HTML移动端适配

发表于 更新于 阅读次数：

前言

HTML移动端适配

通过HTML

  • 通过meta标签的viewport属性来调整视口

name：文档级别的元数据

name="viewport" content="width=device-width, initial-scale=1.0"：布局视口设置，多个属性用逗号分隔，只对移动端有效

width=device-width：布局视口宽度设置为当前设备宽度
height=：布局视口高度设置
initial-scale=1.0：设置视口与设备宽度的缩放比例，缺省值为1.0，取值范围为[0.0,10.0]
initial-scale=1.0：设置视口与设备宽度的最小缩放比例，缺省值为1.0，取值范围为[0.0,10.0]
initial-scale=1.0：设置视口与设备宽度的最大缩放比例，缺省值为1.0，取值范围为[0.0,10.0]
user-scalable=no：设置禁止用户缩放页面
minimum-sacle=1.0：允许用户缩放的最小比例，默认为0.1，IOS默认为0.25
maximum-scale=1.0：允许用户缩放的最大比例，默认为10.0
shrink-to-fit=no：设置禁止Safari强制缩放页面

1
2
3
<head>
  <meta>
</head>

rem

通过CSS

  • 由于rem会随着font-size的变化而变化，所以只需要通过CSS的@media在不同屏幕下设置不同的font-size，就可以实现移动端适配
    • font-size的尺寸通常为屏幕宽度的10%
1
2
3
4
5
6
7
8
9
10
11
12
<style>
  @media screen and (min-width: 375px) {
    html {
      font-size: 37.5px;
    }
  }
  
  div {
    width: 2.6667rem;
    height: 2.6667rem;
  }
</style>

通过JS

  • 由于rem会随着font-size的变化而变化，所以只需要通过amfe/lib-flexible提供的JS代码在不同屏幕下动态设置不同的font-size，就可以实现移动端适配
1
2
3
4
5
6
7
<script src="https://raw.githubusercontent.com/amfe/lib-flexible/refs/heads/2.0/index.min.js"></script>
<style>
  div {
    width: 2.6667rem;
    height: 2.6667rem;
  }
</style>

源代码

https://raw.githubusercontent.com/amfe/lib-flexible/refs/heads/2.0/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

px转rem

  • 设计稿中的px转换成rem时需要除以font-size
    • 100px / 37.5px = 2.6667rem

Less

  • 通过混入
1
2
3
4
5
6
7
8
.px2rem(@px) {
  result: 1rem * (@px / 37.5)
}

div {
  width: .px2rem(100)[result];
  height: .px2rem(100)[result];
}

通过Webpack插件

  • 通过postcss-pxtorem插件在打包时自动将源码中的px转换为rem
1
2
3
4
div {
  width: 100px;
  height: 100px;
}

vw

  • 由于vw会随着viewport的变化而变化，所以只需要将px转换为vw，就可以实现移动端适配
1
2
3
4
div {
  width: 26.667vw;
  height: 26.667vw;
}

px转vw

  • 1vw = 1% * 视口宽度
  • 设计稿中的px转换成vw时需要除以font-size再乘10
    • 100px / 37.5px * 10 = 26.667vw

Less

  • 通过混入
1
2
3
4
5
6
7
8
9
10
@vwUnit: 3.75;

.px2vw(@px) {
  result: (@px / @vwUnit) * 1vw;
}

div {
  width: .px2vw(100)[result];
  height: .px2vw(100)[result];
}

通过Webpack插件

1
2
3
4
div {
  width: 100px;
  height: 100px;
}

完成