Margin / Padding для мобильных устройств - Quasar Framework (VueJS)

Question

Как пользоваться spacing когда я хочу, чтобы это было отзывчивым. Например, я хочу установить маркировкуq-ma-md Но я хочу, чтобы это было только тогда, когда это мобильный телефон. Так как это сделать?

В этом стиле q-ma-md md означает значение поля, а не указывает ширину экрана.

Answer 1

В Quasar в настоящее время есть такие возможности, как бутстрап и попутный ветер. Из документов

Когда он включен (через 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>

Answer 3

Это применит класс q-ma-md к div, если устройство мобильное.

      <div :class="{ 'q-ma-md': $q.platform.is.mobile }"></div>