Медиа-запросы в Element Plus

Element Plus предоставляет гибкие возможности для адаптивного дизайна через использование встроенных классов, директив и утилит, которые позволяют изменять поведение компонентов в зависимости от ширины экрана. Основная цель — обеспечить корректное отображение интерфейсов на разных устройствах, от мобильных до десктопов, без необходимости писать множество CSS вручную.

Системы брейкпоинтов

Element Plus использует стандартную сетку, основанную на 12-колоночной системе, аналогичной Bootstrap. Встроенные брейкпоинты позволяют быстро адаптировать компоненты под разные размеры экранов:

Брекпоинт Минимальная ширина
xs 0px
sm 576px
md 768px
lg 992px
xl 1200px
xxl 1600px

Эти брейкпоинты можно использовать при настройке колонок и видимости компонентов через пропсы span, offset, push и pull.

<el-row>
  <el-col :xs="24" :sm="12" :md="8" :lg="6">
    Контент
  </el-col>
</el-row>

В этом примере колонка будет занимать всю ширину на мобильных устройствах (xs=24), половину на малых экранах (sm=12), треть на средних (md=8) и четверть на больших (lg=6).

Адаптивные утилиты для компонентов

1. el-col и el-row

Колонки и ряды автоматически подстраиваются под размер экрана с помощью пропсов, привязанных к брейкпоинтам. Для сложных макетов можно комбинировать несколько пропсов:

<el-row :gutter="20">
  <el-col :xs="24" :sm="12" :md="8" :lg="6">Блок 1</el-col>
  <el-col :xs="24" :sm="12" :md="8" :lg="6">Блок 2</el-col>
  <el-col :xs="24" :sm="12" :md="8" :lg="6">Блок 3</el-col>
  <el-col :xs="24" :sm="12" :md="8" :lg="6">Блок 4</el-col>
</el-row>

Проп gutter задает промежуток между колонками, который также можно адаптировать с использованием объектов:

<el-row :gutter="{ xs: 10, sm: 15, md: 20, lg: 30 }">
  <el-col :span="12">Контент</el-col>
</el-row>

2. Адаптивная видимость через v-show и условные рендеры

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

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const isMobile = ref(window.innerWidth < 768);

const handleResize = () => {
  isMobile.value = window.innerWidth < 768;
};

onMounted(() => window.addEventListener('resize', handleResize));
onBeforeUnmount(() => window.removeEventListener('resize', handleResize));
</script>

<template>
  <el-button v-if="isMobile" type="primary">Мобильная кнопка</el-button>
  <el-button v-else type="success">Десктопная кнопка</el-button>
</template>

Такой подход позволяет полностью управлять адаптивностью компонентов на уровне Vue и Element Plus, не создавая лишних CSS-классов.

Использование медиавыражений в стилях компонентов

Element Plus не ограничивает использование стандартного CSS, поэтому медиавыражения остаются мощным инструментом для точной настройки внешнего вида.

@media (max-width: 768px) {
  .custom-card {
    padding: 10px;
    font-size: 14px;
  }
}

@media (min-width: 769px) {
  .custom-card {
    padding: 20px;
    font-size: 16px;
  }
}

Для интеграции с Vue можно использовать <style scoped> и динамические классы:

<template>
  <el-card :class="{'mobile-card': isMobile, 'desktop-card': !isMobile}">
    Контент карточки
  </el-card>
</template>

<style scoped>
.mobile-card {
  padding: 10px;
  font-size: 14px;
}

.desktop-card {
  padding: 20px;
  font-size: 16px;
}
</style>

Динамическая адаптация через ResizeObserver

Для более сложных компонентов можно использовать ResizeObserver для отслеживания изменений размера контейнера, а не только окна браузера. Это особенно актуально для вложенных элементов:

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const containerWidth = ref(0);

let observer;

onMounted(() => {
  const el = document.getElementById('resize-container');
  observer = new ResizeObserver(entries => {
    for (let entry of entries) {
      containerWidth.value = entry.contentRect.width;
    }
  });
  observer.observe(el);
});

onBeforeUnmount(() => observer.disconnect());
</script>

<template>
  <div id="resize-container">
    <el-alert
      :title="containerWidth < 600 ? 'Малый контейнер' : 'Большой контейнер'"
      type="info"
    />
  </div>
</template>

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

Адаптивные таблицы и формы

Element Plus предлагает специальные пропсы для адаптивных таблиц (el-table) и форм (el-form):

<el-table :data="tableData" style="width: 100%" :max-height="isMobile ? 300 : 600">
  <el-table-column prop="name" label="Имя" />
  <el-table-column prop="age" label="Возраст" />
</el-table>

Формы можно адаптировать с помощью label-width и inline:

<el-form :label-width="isMobile ? '80px' : '120px'" :inline="isMobile">
  <el-form-item label="Имя">
    <el-input v-model="form.name" />
  </el-form-item>
</el-form>

Использование таких пропсов обеспечивает правильное отображение элементов на разных устройствах без необходимости переписывать стили.

Эти методы позволяют создавать полноценные адаптивные интерфейсы на Element Plus, комбинируя возможности сетки, медиавыражений и реактивных вычислений Vue.

Оглавление