一篇文章搞懂，vue中pc端与移动端适配解决方案（亲测有效）

<template>
  <div id="app">
    <!-- 页面内容 -->
  </div>
</template>
 
<script>
export default {
  name: 'App',
  created() {
    // 在Vue实例创建后立即执行
    this.setRem()
    window.onresize = () => {
      this.setRem()
    }
  },
  methods: {
    setRem() {
      // 设置基准字体大小
      const baseSize = 16 // 可以根据设计稿实际尺寸进行调整
      // 当前窗口宽度除以设计稿宽度，得到比例系数
      const scale = document.documentElement.clientWidth / 750
      // 设置字体大小
      document.documentElement.style.fontSize = `${baseSize * scale}px`
    }
  }
}
</script>
 
<style>
/* 样式 */
</style>

这段代码实现了在Vue项目中根据屏幕宽度动态调整基准字体大小的功能，以实现对移动端和PC端的适配。在创建Vue实例后，setRem方法会被调用，并且每当窗口大小发生变化时，也会重新计算并设置字体大小。这是一个典型的移动端适配解决方案。