怎么让页面字体大小自适应

做的名片页面，现在在电脑端打开是正常的，

但是手机端打开就字体起飞

怎么能给字体加个自适应，让字体大小随可以自动缩放？页面代码如下

<template>
  <div id="business">
    <div class="mycard">
      <el-image :src="url" :fit="fill" @load="setEL" />
      <div class="word" :style="position">
        <div class="info">
          <h1><span>程勇</span><a>主任</a></h1>
        </div>
        <div class="body">
          <div class="title">
            <h6>
              <label>大数据中心</label><br>
              <label>绿色交通企业服务事业部</label><br>
              <label>苏州办事处</label>
            </h6>
          </div>
          <div class="loc">
            <label>综合交通运输大数据处理及应用技术交通运输行业研发中心</label><br>
            <label>交通运输节能减排第三方审核机构</label><br>
            <label>江苏交通运输行业能耗排放监测统计中心</label><br>
            <label>江苏省绿色循环低碳技术成果转化公共技术服务平台</label><br>
          </div>
        </div>
        <div class="con">
          <h3>江苏交科能源科技发展有限公司</h3>
          <label>地址:&nbsp;江苏省南京市水西门大街223号2F</label>
          <label>邮编:&nbsp;210017</label><br>
          <label>手机:&nbsp;13921983094</label>
          <label>电话:&nbsp;025-86778219</label><br>
          <label>传真:&nbsp;025-86778016</label>
          <label>网址:&nbsp;www.enytek.com</label><br>
        </div>
      </div>
    </div>
  </div>
</template>

背景图片计算代码如下

<script>
export default {
  name: 'BusinessCard',
  data() {
    return {
      url: 'https://s2.loli.net/2021/12/27/jREPNUuaK2L4cQx.jpg',
      el: null,
      fill: 'fill',
      imgSourceWidh: 2480, // 原始图片宽度
      // 原始图片空白位置大小
      oleft: 200,
      otop: 1925,
      owidth: 2120,
      oheight: 2075,
      position: {
        // 计算后的值
        left: 0,
        top: 0,
        width: 0,
        height: 0
      }
    }
  },
  mounted() {
    var t
    window.addEventListener('resize', () => {
      clearTimeout(t)
      t = setTimeout(() => {
        this.resizeWordPosition()
      }, 30)
    })
  },
  methods: {
    resizeWordPosition() {
      // 2480x4256
      var rate = this.el.offsetWidth / this.imgSourceWidh
      for (var attr in this.position) {
        this.position[attr] = Math.floor(this['o' + attr] * rate) + 'px'
      }
    },
    setEL(e) {
      this.el = e.target
      this.resizeWordPosition()
    }
  }
}
</script>

css代码如下

<style lang="scss" scoped>
.mycard {
  position: relative;
}
.mycard .word {
  position: absolute;
  left: 25px;
  top: 250px;
  width: 275px;
  height: 265px;
  box-sizing: border-box;
  padding: 10px;
  // background: rgba(255, 254, 254, 0.5);
  letter-spacing:2px
}
#business {
  max-width: 100vh;
  max-height: 100vh;
}
h1,h3,h6 {
  margin: 0;
}
.info,.body,.con {
  width: 80%;
  margin: 10% 10% 10% 10%;
}
.info {
  height: 52px;
}
.info span {
  color: #1f8577;
  letter-spacing: 20px;
  font-size: 60px;
}
.info a {
  color: #000;
  font-weight: 530;
  font-size: 20px;
}
.title {
  height: 80px;
}
.title label {
  line-height: 30px;
  font-size: 20px;
}
.loc {
  margin-top: 16px;
}
.loc label {
  line-height: 26px;
  font-size: 15px;
  font-weight: 200;
}
.con h3 {
  font-size: 30px;
  margin-bottom: 10px;
}
.con label {
  margin: 15px 10px 0 0;
  display: inline-block;
  font-weight: 350;
}
.con label:nth-child(n + 6) {
  width: 50%;
  margin-right: 0;
  float: left;
}
</style>

搜素的几个用px2rem的试过了，只会改变电脑端显示的字体大小和样式，对在手机上打开完全无效，有什么好的思路或者例子吗？

这个写在js里面，可以根据屏幕变化进行变化

document.documentElement.style.fontSize = innerWidth / 10 + "px";
window.onresize = function() {
    document.documentElement.style.fontSize = innerWidth / 10 + "px";
}

可以参考一下
https://blog.csdn.net/qq_43382853/article/details/103854457

用rem来设置字体大小。
rem会基于html设置的font-size大小自适应，配合媒体查询
/* 手机屏幕的字体大小 /
@media screen and (max-width: 768px) {
#app {
font-size: 0.05rem;
}
}
/ 笔记本电脑的字体大小 /
@media screen and (min-width: 768px) and (max-width: 1024px) {
#app {
font-size: 0.08rem;
}
}
/ 台式电脑显示器屏幕字体大小 */
@media screen and (min-width: 1024px) {
#app {
font-size: 0.08rem;
}
}

rem布局或者响应式布局scal拉伸

1 移动端页面必须加

 <meta name="viewport">

标签，可以配置如下

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
//该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

用rem来设置字体大小。配合媒体查询设置html不同宽度下的字体大小
移动端最小字体是12px，想要再小一般可以用transform:scale来缩小文字
你这个看着应该是没有配置viewport视觉视口标签，所以切换移动端文字过大
视觉视口可以看作是手机屏幕这么大的一个窗口，但是它能显示的像素个数却不是屏幕上面的这么多逻辑像素。

如有帮助，麻烦点个【采纳此答案】谢谢啦~