Mobile-first подход

Mobile-first подход предполагает разработку интерфейсов с приоритетом мобильных устройств. Это означает, что стили и компоненты проектируются сначала для небольших экранов, а затем адаптируются для больших. В MUI эта концепция реализуется через систему breakpoints и responsive design utilities.

Breakpoints

MUI предоставляет предопределённые точки останова:

  • xs — экраны <600px
  • sm — ≥600px
  • md — ≥900px
  • lg — ≥1200px
  • xl — ≥1536px

Эти значения можно использовать для создания адаптивного интерфейса. Mobile-first стратегия подразумевает определение стилей для xs по умолчанию, с последующим переопределением для больших экранов.

Пример:

import { Box } from '@mui/material';

<Box
  sx={{
    width: { xs: '100%', sm: '80%', md: '60%' },
    padding: { xs: 2, sm: 3, md: 4 },
  }}
>
  Контент
</Box>

Здесь width и padding задаются сначала для маленьких экранов (xs), а затем масштабируются для sm и md.

Responsive Utilities

MUI предлагает Grid, Stack и Box для построения адаптивных интерфейсов:

  • Grid: позволяет задавать количество колонок в зависимости от ширины экрана.
<Grid container spacing={2}>
  <Grid item xs={12} sm={6} md={4}>
    Элемент 1
  </Grid>
  <Grid item xs={12} sm={6} md={4}>
    Элемент 2
  </Grid>
</Grid>
  • Stack: удобен для вертикальных и горизонтальных списков, где направление и отступы могут зависеть от breakpoints.
<Stack
  direction={{ xs: 'column', sm: 'row' }}
  spacing={{ xs: 1, sm: 2, md: 3 }}
>
  <Button>Кнопка 1</Button>
  <Button>Кнопка 2</Button>
</Stack>
  • Box: универсальный контейнер для любых стилей. Его свойство sx поддерживает медиазапросы напрямую через breakpoints.

Система тем и адаптивная типографика

MUI позволяет задавать адаптивные темы, что особенно полезно для mobile-first подхода. Используются функции createTheme и responsiveFontSizes:

import { createTheme, responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme({
  typography: {
    h1: { fontSize: '2rem' },
    body1: { fontSize: '1rem' },
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536,
    },
  },
});

theme = responsiveFontSizes(theme);

responsiveFontSizes автоматически масштабирует шрифты для разных экранов, что улучшает читаемость на мобильных устройствах.

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

MUI предлагает множество компонентов с встроенной адаптивностью:

  • AppBar: можно настроить высоту и видимость элементов в зависимости от экрана.
  • Drawer: часто используется как скрытое меню на мобильных устройствах и постоянное боковое меню на десктопах.
  • Typography: поддерживает breakpoints для изменения размеров и межстрочного интервала.

Пример адаптивного Drawer:

import { Drawer, useTheme, useMediaQuery } from '@mui/material';

const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

<Drawer variant={isMobile ? 'temporary' : 'permanent'}>
  Меню
</Drawer>

Практические рекомендации

  • Всегда начинать с минимальной ширины экрана (xs) и расширять стили для sm, md и выше.
  • Использовать Grid и Stack для построения адаптивной структуры без дублирования стилей.
  • Применять sx для быстрого тестирования responsive стилей.
  • Включать адаптивную типографику через responsiveFontSizes для улучшения читаемости.
  • Проверять интерфейс на разных устройствах, так как mobile-first предполагает, что мобильная версия — основная.

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

Для оптимизации mobile-first интерфейсов важно подбирать изображения разных размеров и использовать компонент ImageList или img с srcSet:

<img
  srcSet="small.jpg 600w, medium.jpg 900w, large.jpg 1200w"
  sizes="(max-width:600px) 100vw, (max-width:900px) 50vw, 33vw"
  src="medium.jpg"
  alt="Пример изображения"
/>

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

Итоговые механизмы Mobile-First

Mobile-first в MUI строится на следующих механизмах:

  • Breakpoints и sx для адаптивных стилей.
  • Grid, Stack и Box для построения структур.
  • Адаптивная типографика и тема.
  • Responsive компоненты (Drawer, AppBar, Typography).
  • Оптимизация медиа-контента.

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

Оглавление