Vue.js 3/Quasar2中如何根据屏幕尺寸动态修改字体大小？

你的问题核心是错误在Options API模式下使用useQuasar()，Quasar在Options API中会自动将$q注入组件实例，无需手动在data里声明，这会导致你获取的$q并非响应式实例，无法正确监听屏幕尺寸变化。

修正后的代码 #

组件代码 #

<template>
  <p :class="fontSize">text content</p>
</template>

<script>
export default {
  // 移除data中错误的$q声明
  computed: {
    fontSize() {
      // 直接使用Quasar自动注入的this.$q
      if (this.$q.screen.lt.sm) {
        return 'text-body1'
      } else {
        return 'text-body2'
      }
    }
  }
}
</script>

额外验证点 #

• 你当前quasar.config.js中的bodyClasses配置是正确的，该配置用于给body添加屏幕断点类，和组件内$q.screen的监听逻辑不冲突，无需修改。
• 测试时注意Quasar默认断点：lt.sm对应宽度小于600px，需要将窗口缩至600px以下才能触发text-body1；若需适配其他尺寸，可调整判断条件（比如lt.md对应宽度小于1264px）。

内容的提问来源于stack exchange，提问作者john