vue3项目rem自适应大小如何实现

小半 • 2023年8月11日下午3:54 • 微信精选 • 阅读 640

❝

rem自适应方案只是页面自适应的解决方案之一，本文主要讲解一下实现过程！

本文演示的是Vue3语法！

❞

rem自适应

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

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

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

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

实现过程

获取当前的设备宽度

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

计算rem的值

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

赋值到根标签

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

监听宽度变化

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

使用效果

/*
* 设计稿盒子宽100px
* 高100px
* 字体30px
*/
.box{
  width:1rem;
  height:1rem;
  font-size:0.3rem;
}

完整示例（Vue3）

<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>