rem自适应

随着现在互联网设备的日益更新，各大尺寸的屏幕参差不穷

导致我们的布局在某些小屏或者大屏上与UI的表现并不一致

所以，很多人寻求各种解决方案，我们现在的很多移动端框架都是支持了的，包括小程序，很多都采用了rpx的方式，这里不去深究它们的实现方案。

像手机淘宝网，就是在根标签设置font-size，然后使用rem去设置尺寸大小，它们可能有更精细化的优化处理，这里就只实现普通的方法。

图片淘宝示例图如上

实现过程

获取当前的设备宽度

1
const view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;

计算rem的值

1
2
3
// 750 是设计稿的宽度 ， 按设计稿调整
// 乘以100 是为了具体宽度值书写不会太大
const fontSize = fontSize = 100 * (view_width / 750) + 'px'

赋值到根标签

1
2
const _html = document.getElementsByTagName('html')[0];
_html.style.fontSize =  fontSize

监听宽度变化

1
2
// onWindowResize 即上述处理过程
window.addEventListener('resize', onWindowResize)

使用效果

1
2
3
4
5
6
7
8
9
10
/*
* 设计稿盒子宽100px
* 高100px
* 字体30px
*/
.box{
  width:1rem;
  height:1rem;
  font-size:0.3rem;
}

完整示例（Vue3）

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
<script setup>
import { onMounted, onUnmounted, ref } from "vue";

const flag = ref(false)

// 防止频繁触发
const onWindowResize = () => {
  if (!flag.value) {
    flag.value = true
    setTimeout(() => {
      initFontSize()
      flag.value = false
    }, 300)
  }
}

const initFontSize = () => {
  const view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
  const _html = document.getElementsByTagName('html')[0];

  _html.style.fontSize = 100 * (view_width / 1280) + 'px'
}

onMounted(() => {
  initFontSize()
  window.addEventListener('resize', onWindowResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', onWindowResize)
})

</script>