vue中使用rem实现动态改变字体大小

在Vue中使用rem单位来动态改变字体大小，可以通过结合CSS和Vue的计算属性来实现。

首先，在CSS中定义根元素的字体大小为一个基准值，比如16px（或者其他适合你的基准值）。可以在全局的CSS文件中添加以下代码：

html {
  font-size: 16px;
}

然后，你可以在Vue组件中使用计算属性来设置其他元素的字体大小。例如：

<template>
  <div>
    <p :style="{ fontSize: calculatedFontSize }">这是一段文字</p>
    <h1 :style="{ fontSize: calculatedHeadingSize }">标题</h1>
  </div>
</template>

<script>
export default {
  computed: {
    calculatedFontSize() {
      return `${this.$store.state.fontSize}rem`; // 假设使用Vuex来管理全局字体大小
    },
    calculatedHeadingSize() {
      return `${this.$store.state.fontSize * 2}rem`; // 标题字体大小为全局字体大小的两倍
    }
  }
};
</script>

在上述代码中，我们使用了Vue的计算属性来动态计算其他元素的字体大小。这里假设使用了Vuex来管理全局的字体大小，所以从this.$store.state.fontSize获取当前的字体大小，并将其与rem单位拼接起来作为样式的值。

当全局的字体大小发生变化时，更新Vuex中的fontSize状态，计算属性会自动重新计算相关元素的字体大小，并应用到对应的样式中。

这样，当全局字体大小改变时，页面中使用计算属性设置的字体大小会自动进行调整。

在Vue项目中使用rem单位来动态改变字体大小，可以通过结合CSS和JavaScript来实现。

首先，在CSS文件中定义根元素的字体大小为一个基准值，比如16px（或者其他适合你的基准值）。可以在全局的CSS文件中添加以下代码：

html {
  font-size: 16px;
}

然后，在Vue项目的入口文件（通常是main.js）中，添加一段JavaScript代码来动态改变根元素的字体大小。例如：

import Vue from 'vue';

// 监听窗口大小变化事件
window.addEventListener('resize', function() {
  var screenWidth = window.innerWidth;

  // 根据屏幕宽度计算新的根元素字体大小
  var newFontSize = screenWidth / 20; // 假设每个rem相当于屏幕宽度的1/20

  // 更新根元素的字体大小
  document.documentElement.style.fontSize = newFontSize + 'px';
});

new Vue({
  // ...
}).$mount('#app');

在上述代码中，我们假设每个rem相当于屏幕宽度的1/20。你可以根据自己的需求来调整这个比例。

当窗口大小发生变化时，会触发resize事件，然后根据新的窗口大小计算出新的根元素字体大小，并将其应用到根元素上。

这样，当窗口大小改变时，页面中使用rem单位的字体大小会自动进行调整。请注意，在Vue项目中，如果你使用了UI框架（如Element UI、Vant等），它们可能已经提供了自动适应字体大小的功能，你可以直接使用它们提供的方法。

vue中使用rem实现动态改变字体大小

悦读