响应式 | Quasar 框架

如何贡献

选项 & 帮助器

样式 & 标识

布局和网格

Vue 指令

Quasar 插件

Vue 组合式 API

安全

Quasar CLI (使用 Vite)

Quasar CLI (使用 Webpack)

Icon Genie CLI

应用扩展

Quasar 工具

响应式

QResponsive 是一个组件，它强制内容根据其宽度保持纵横比。

用法

提示

警告

不要在已经具有ratio属性的 Quasar 组件（如 QImg 或 QVideo）或具有强制高度的组件上使用它。

请注意，我们使用的是垂直对齐 (items-start) 而不是默认值 (stretch)，因此 flexbox 不会强制对每个 QResponsive 组件的高度进行强制。

以下只是一些示例。QResponsive 不限于 QCard 和 QCarousel。

请注意，当我们在 QCarousel 上使用 QResponsive 时，我们不会提供height 属性，因为 QResponsive 会处理它。

通过 CSS 类或内联方式直接在 QResponsive 组件上应用最大高度（或最大宽度等）。请记住，您仍然有责任确保内容不会超出容器。

1. 简介

2. QResponsive API

3. 用法

3.1. 基本

3.2. Flex 行

3.3. 在某些组件上

3.4. 最大高度