如何使用Quasar响应式CSS类实现内容的条件式显示？

Quasar支持类似Tailwind的断点前缀式响应类，通过给实用类添加断点前缀，就能实现不同屏幕尺寸下的样式切换，完全满足你的需求。

基本用法 #

Quasar的响应式实用类遵循 [断点前缀]:[实用类] 的格式，其中断点前缀对应不同的屏幕尺寸范围，直接添加到类名前即可。

比如你想要实现「默认文本灰色，sm断点及以上改为红色」，代码可以写成：

<div class="text-grey-10 sm:text-red-10"></div>

注：Quasar的颜色色阶为1-12（如text-grey-10对应深灰色），你例子中的text-grey-100是Tailwind的色阶，需要对应调整为Quasar的色阶值。

支持的断点前缀 #

Quasar提供了丰富的断点前缀，覆盖所有尺寸范围：

• 基础断点（≥该断点生效）：xs:、sm:、md:、lg:、xl:
• 小于断点生效：lt-xs:、lt-sm:、lt-md:、lt-lg:、lt-xl:
• 大于断点生效：gt-xs:、gt-sm:、gt-md:、gt-lg:、gt-xl:
• 仅当前断点生效：only-xs:、only-sm:、only-md:、only-lg:、only-xl:

断点尺寸对应表 #

更多示例 #

1. 不同断点下的字体大小：

<div class="text-body1 sm:text-body2 md:text-h6 lg:text-h4"></div>

2. 仅在md及以上显示特定样式：

<div class="text-grey-5 md:text-grey-11 md:text-h1">Hello</div>

这和你原来的gt-md实现效果一致（md:前缀对应≥1024px，和gt-sm范围相同）。

3. 小于md断点时隐藏元素：

<div class="block lt-md:hidden">仅在md及以上显示</div>

自定义样式的响应式扩展 #

如果需要给自定义类添加响应式前缀，也可以借助Quasar的Sass变量实现：

// 自定义默认样式
.my-custom-text {
  color: var(--q-color-blue-5);
}

// sm断点及以上生效的样式
@media (min-width: $q-breakpoint-sm-min) {
  .sm\:my-custom-text {
    color: var(--q-color-purple-5);
  }
}

在模板中即可像内置类一样使用：

<div class="my-custom-text sm:my-custom-text">自定义响应式文本</div>

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