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

作者：System 时间：2024年08月14日分类：所有,vue.js 字数：697

这篇文章距离上次修改已过272天，其中的内容可能已经有所变动。

<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方法会被调用，并且每当窗口大小发生变化时，也会重新计算并设置字体大小。这是一个典型的移动端适配解决方案。

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

评论已关闭

推荐阅读