Брейкпоинты и адаптивность

Vuetify использует собственную систему брейкпоинтов, которая построена на подходе mobile-first. Это означает, что стили для меньших экранов задаются по умолчанию, а стили для больших экранов применяются через медиазапросы. Система брейкпоинтов Vuetify основана на пяти стандартных размерах:

  • xs (extra-small): до 599px
  • sm (small): 600–959px
  • md (medium): 960–1279px
  • lg (large): 1280–1919px
  • xl (extra-large): 1920px и выше

Каждый брейкпоинт может использоваться для управления видимостью компонентов, сеткой, отступами и другими стилями.

Использование брейкпоинтов в сетке (Grid System)

Система сетки Vuetify основана на flexbox и позволяет создавать адаптивные макеты с помощью компонентов <v-container>, <v-row> и <v-col>.

Пример адаптивной сетки:

<v-container>
  <v-row>
    <v-col cols="12" sm="6" md="4" lg="3">
      Контент колонки
    </v-col>
    <v-col cols="12" sm="6" md="4" lg="3">
      Контент колонки
    </v-col>
  </v-row>
</v-container>
  • cols="12" — колонка занимает всю ширину на экранах xs.
  • sm="6" — на маленьких экранах колонка занимает половину ширины.
  • md="4" — на средних экранах колонка занимает треть ширины.
  • lg="3" — на больших экранах колонка занимает четверть ширины.

Таким образом, один компонент <v-col> автоматически изменяет ширину в зависимости от размера экрана, что делает макет адаптивным.

Управление видимостью компонентов

Vuetify предоставляет классы display helpers для контроля отображения элементов на разных брейкпоинтах.

Основные классы:

  • d-none — скрыть элемент на всех экранах
  • d-{breakpoint}-none — скрыть элемент на определенном брейкпоинте
  • d-{breakpoint}-block — показать элемент как блочный на указанном брейкпоинте
  • d-{breakpoint}-inline — показать элемент как inline

Пример:

<div class="d-none d-md-block">
  Этот текст виден только на экранах md и выше
</div>

Адаптивные отступы и размеры

Vuetify использует систему spacing utilities, которая также поддерживает брейкпоинты.

  • pa-{size} — padding для всех сторон
  • ma-{size} — margin для всех сторон
  • px-{size}, py-{size}, mx-{size}, my-{size} — горизонтальные и вертикальные отступы

Поддержка брейкпоинтов реализуется через добавление суффикса:

<div class="pa-2 pa-md-5">
  Отступ маленький на xs/sm и большой на md/lg/xl
</div>

Адаптивные типографические стили

Vuetify позволяет изменять размер текста и заголовков в зависимости от брейкпоинта, используя responsive typography classes:

  • text-h1, text-h2, … text-h6 — заголовки
  • text-subtitle-1, text-subtitle-2 — подзаголовки
  • text-body-1, text-body-2 — основной текст

Класс можно сочетать с брейкпоинтами:

<h1 class="text-h4 text-md-h2">
  Заголовок меняет размер с h4 на h2 на экранах md и выше
</h1>

Использование v-responsive для адаптивного контента

Компонент <v-responsive> позволяет сохранять пропорции элементов, особенно изображений и видео, на любых размерах экрана.

Пример:

<v-responsive :aspect-ratio="16/9">
  <img src="image.jpg" alt="Пример">
</v-responsive>
  • aspect-ratio задаёт соотношение сторон
  • Элемент автоматически подстраивается под ширину контейнера, сохраняя пропорции

Адаптивные изображения и аватары

Vuetify поддерживает адаптивные размеры компонентов через пропсы, такие как max-width, height и width, с возможностью задавать их через брейкпоинты:

<v-img
  src="example.jpg"
  max-width="100%"
  height="200"
  class="height-md-400"
></v-img>
  • height-md-400 — высота 400px на экранах md и выше
  • На меньших экранах используется базовая высота 200px

Динамическая адаптация через breakpoint объект

Vuetify предоставляет глобальный объект this.$vuetify.breakpoint, который позволяет определять текущий размер экрана программно.

Пример:

<template>
  <v-btn v-if="$vuetify.breakpoint.mdAndUp">
    Только на экранах md и выше
  </v-btn>
</template>

Основные свойства объекта breakpoint:

  • xs, sm, md, lg, xl — булевы значения текущего брейкпоинта
  • xsOnly, smOnly, mdOnly, lgOnly, xlOnly — для проверки конкретного брейкпоинта
  • smAndUp, mdAndUp, lgAndUp, xlOnly — диапазоны размеров
  • smAndDown, mdAndDown, lgAndDown — диапазоны вниз

Этот объект идеально подходит для динамического управления отображением контента и логики интерфейса в зависимости от размера экрана.

Комбинирование брейкпоинтов и пользовательских классов

Для сложных макетов часто используется комбинация встроенных классов и кастомного CSS:

<style>
.custom-padding {
  padding: 8px;
}

@media (min-width: 960px) {
  .custom-padding {
    padding: 24px;
  }
}
</style>

<div class="custom-padding">
  Контент с адаптивными отступами
</div>

Такой подход позволяет сохранять точный контроль над адаптивностью в проектах, где стандартных утилит Vuetify недостаточно.

Использование v-show и v-if с брейкпоинтами

Для оптимизации рендеринга больших компонентов можно использовать условное отображение через брейкпоинты:

<v-dialog v-if="$vuetify.breakpoint.smAndUp" persistent>
  Диалог доступен только на sm и выше
</v-dialog>
  • v-if полностью удаляет компонент из DOM на неподходящих экранах
  • v-show скрывает компонент через CSS, но оставляет в DOM

Такой подход помогает уменьшить нагрузку на мобильные устройства и сделать интерфейс максимально отзывчивым.

Система брейкпоинтов Vuetify сочетает гибкость утилитных классов, мощь сетки и возможности программного контроля, что делает библиотеку идеальной для построения полностью адаптивных интерфейсов в проектах на Vue.js.

Оглавление