Vuetify 1.5.24版本如何使用断点实现文本字号响应式调整

关于Vuetify 1.5.24不支持响应式字体类的说明 #

text-{breakpoint}-{size}格式的响应式字体工具类是Vuetify 2.x才新增的特性，1.5.x版本没有内置该类，所以你写的类名不会生效。

可行实现方案 #

• 方案1：结合内置断点对象动态绑定类 #

  Vuetify 1.5 组件内可直接通过$vuetify.breakpoint访问当前断点状态，动态绑定class即可实现需求：
  简单场景直接写在模板内：

  <h1 :class="$vuetify.breakpoint.xs ? 'display-1' : 'display-2'">Hello World</h1>
  

  多断点场景建议用计算属性维护：

  computed: {
    titleClass() {
      const { breakpoint } = this.$vuetify
      if (breakpoint.xs) return 'display-1'
      if (breakpoint.mdAndUp) return 'display-2'
      return 'display-3' // 其余断点默认样式
    }
  }
  

  模板内直接引用即可：

  <h1 :class="titleClass">Hello World</h1>
  

• 方案2：全局自定义响应式字体类 #

  如果需要全局复用text-{breakpoint}-{size}的写法，可按照Vuetify 1.5的默认断点规则手写全局样式：
  Vuetify 1.5默认断点如下：

  • xs：<600px
  • sm：600px ~ 959px
  • md：960px ~ 1263px
  • lg：1264px ~ 1903px
  • xl：≥1904px

  全局样式示例：

  /* xs断点样式 */
  @media only screen and (max-width: 599px) {
    .text-xs-display-1 { 
      font-size: 34px !important; 
      font-weight: 400; 
      line-height: 40px; 
      letter-spacing: -0.01em; 
    }
    .text-xs-display-2 { 
      font-size: 45px !important; 
      font-weight: 400; 
      line-height: 48px; 
      letter-spacing: -0.01em; 
    }
    /* 按需补充其他字号的响应式类 */
  }
  
  /* md及以上断点样式 */
  @media only screen and (min-width: 960px) {
    .text-md-display-1 { 
      font-size: 34px !important; 
      font-weight: 400; 
      line-height: 40px; 
      letter-spacing: -0.01em; 
    }
    .text-md-display-2 { 
      font-size: 45px !important; 
      font-weight: 400; 
      line-height: 48px; 
      letter-spacing: -0.01em; 
    }
    /* 按需补充其他断点的字号类 */
  }
  

  样式定义完成后，你原本的写法<h1 class="text-xs-display-1 text-md-display-2">Hello World</h1>即可正常生效。

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