移动上的保证金/填充-Quasar Framework（VueJS）

Question

当我希望它可以响应时如何使用spacing。 例如，我想设置marging q-ma-md，但是我希望它只能在手机上使用。那么该怎么做呢？

在这种样式q-ma-md中，md表示边距值，而不指定屏幕宽度。

Answer 1

Quasar 目前拥有类似于 bootstrap 和 tailwind 的功能。从docs

<块引用>

启用后（通过 quasar.conf.js > framework > cssAddon: true），它为所有与间距相关的 CSS 类提供断点感知版本。 请注意，启用它时，CSS 占用空间会出现明显的凹凸。所以只有在你真的需要时才这样做。

<块引用>

用法：.q-(p|m)(t|r|b|l|a|x|y)-<bp>-(none|auto|xs|sm|md|lg|xl)

<块引用>

示例：q-pa-xs-md q-pa-sm-sm q-px-md-lg q-py-md-md q-ma-md-sm

Answer 2

在已安装的功能中，使用

检查平台

if(this.$q.platform.is.mobile){
this.class_variable='q-ma-md'
}
else{
this.class_variable=''
}

然后将其绑定到您的前端。

<div :class='class_variable'></div>