如何在Quasar中基于断点修改文本尺寸？报错排查与解决

错误原因 #

你遇到的Undefined operation "(600px,) > 0"错误，根源是**$sizes变量的定义格式错误**。你给sm、md等断点设置的值是带括号的单元素列表（比如($breakpoint-xs + 1,)），但Quasar内部的fg()函数会尝试对这些值进行数值比较运算，列表类型无法和数字直接执行>操作，因此抛出错误。

第一步：修复$sizes变量 #

把$sizes里的每个断点值改为单个数值，去掉多余的括号：

$sizes: (
  'xs': 0,
  'sm': $breakpoint-xs + 1,
  'md': $breakpoint-sm + 1,
  'lg': $breakpoint-md + 1,
  'xl': $breakpoint-lg + 1,
) !default;

修复后，Quasar的内部函数就能正常处理这些数值，错误会消失。

第二步：实现响应式标题的几种方式 #

方式1：保留自定义媒体查询（修复后可用） #

修复$sizes变量后，你原来写的媒体查询可以正常生效。如果遇到样式优先级问题，可以给字体属性添加!important，或者用更具体的选择器：

@media (max-width: $breakpoint-xs-max) {
  .text-h1 {
    font-size: 2.5rem !important;
    line-height: 2.5rem !important;
  }
  .text-h2 {
    font-size: 1.75rem !important;
    line-height: 2rem !important;
  }
  // 其他标题样式...
}

方式2：利用Quasar内置的响应式字体变量 #

Quasar支持为不同断点单独定义字体变量，无需手动写媒体查询，框架会自动生成响应式样式。比如：

// 定义不同断点下的h1样式
$h1-xs: (
  size: 2.5rem,
  line-height: 2.5rem,
  letter-spacing: -0.01562em,
  weight: 300,
);
$h1-sm: (
  size: 3.5rem,
  line-height: 3.5rem,
  letter-spacing: -0.01562em,
  weight: 300,
);
$h1-md: (
  size: 5rem,
  line-height: 6rem,
  letter-spacing: -0.01562em,
  weight: 300,
);

// 其他标题同理定义
$h2-xs: (
  size: 1.75rem,
  line-height: 2rem,
);
$h2-sm: (
  size: 2.75rem,
  line-height: 2.75rem,
);
$h2-md: (
  size: 3.75rem,
  line-height: 3.75rem,
);

方式3：用CSS clamp()实现平滑响应式字体 #

最简洁的方式是使用CSS clamp()函数，让字体大小随屏幕宽度自动平滑缩放，无需媒体查询：

$h1: (
  size: clamp(2.5rem, 5vw, 5rem), // 最小2.5rem，最大5rem，中间随视窗宽度缩放
  line-height: clamp(2.5rem, 6vw, 6rem),
  letter-spacing: -0.01562em,
  weight: 300,
);
$h2: (
  size: clamp(1.75rem, 4vw, 3.75rem),
  line-height: clamp(2rem, 4.5vw, 3.75rem),
  letter-spacing: -0.00833em,
  weight: 300,
);
// 其他标题同理调整clamp参数

这种方式的优点是字体大小过渡更自然，代码量更少。

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