vue.js - 移动设备上的边距/填充 - Quasar Framework (VueJS)

Question

spacing当我希望它响应时如何使用。例如，我想设置 marging q-ma-md，但我希望它只在它是手机时才设置。那么如何做到这一点呢？

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

Answer 1

Quasar 目前提供类似于 bootstrap 和 tailwind 的功能。从文档

启用后（通过 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>