vue3大屏适配之常见方案

最新推荐文章于 2025-07-15 15:50:56 发布

原创

最新推荐文章于 2025-07-15 15:50:56 发布 · 832 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

VUE3学习大屏自适应的几种方法

1.rem 单位 + 动态设置 html 的 font-size(不推荐)

如将设计稿的宽(1920)平均分成 24 等份，每一份为 80px。

动态设置 html 的 font-size可以使用媒体查询或者js来动态改变body的fontsize大小，媒体查询太麻烦，以下是通过js代码动态改变fontsize大小。

<template>
  <div class="factory">
    哈哈哈哈
    <img src="@/assets/screen/arrow.png" alt="">
  </div>
</template>
 
<script setup>
import { nextTick } from 'vue';
onMounted(() => {
  nextTick(() => {
    changesizeFn()
  })
  window.addEventListener('resize', changesizeFn)
})
 
const changesizeFn = () => {
  let targetX = 1920
  let x = document.documentElement.clientWidth
  //获取body，并改变body的fontsize大小
  let body = document.documentElement
  body.style.fontSize = `${(x / targetX) * 24}px`
}
 
onBeforeUnmount(() => {
  window.removeEventListener('resize', changesizeFn)
})
</script>
 
<style lang="scss" scoped>
.factory {
  width: 24rem;
  height: 13.5rem;
  font-