Перейти к контенту
Редактировать эту страницу

Контрольные точки

API, позволяющее использовать контрольные точки во множестве контекстов.

Для оптимального взаимодействия с пользователем material интерфейсы должны быть в состоянии адаптировать свое расположение в различных точках останова. Material-UI использует упрощенную реализацию оригинальной спецификации.

The breakpoints are used internally in various components to make them responsive, but you can also take advantage of them for controlling the layout of your application through the Grid component.

Default breakpoints

Каждая контрольная точка (ключ) соответствует фиксированной ширине экрана (значению):

  • xs, extra-small: 0px
  • sm, small: 600px
  • md, medium: 900px
  • lg, large: 1200px
  • xl, extra-large: 1536px

These values can be customized.

CSS Media Queries

CSS media queries are the idiomatic approach to make your UI responsive. The theme provides four styles helpers to do so:

В следующем примере мы изменяем фоновой цвет (красный, синий или зеленый) в зависимости от ширины экрана.

значение             |0px     600px    960px    1280px   1920px
ключ                     |xs      sm       md       lg       xl
ширина экрана  |----------|--------------|-------------------->
диапазон             |   xs   |   m   |   md |   lg   |   xl

down(sm): red

up(md): blue

up(lg): green

<Root>
  <Typography>{'down(sm): red'}</Typography>
  <Typography>{'up(md): blue'}</Typography>
  <Typography>{'up(lg): green'}</Typography>
</Root>

JavaScript Media Queries

Иногда использования CSS недостаточно. Во можете изменить дерево визуализации React'а основываясь на контрольных точках.

useMediaQuery hook

You can learn more on the useMediaQuery page.

Custom breakpoints

You define your project's breakpoints in the theme.breakpoints section of your theme.

  • theme.breakpoints.values: Default to the above values. The keys are your screen names, and the values are the min-width where that breakpoint should start.
  • theme.breakpoints.unit: Default to px. The unit used for the breakpoint's values.
  • theme.breakpoints.step: Default to 5 (0.05px). The increment used to implement exclusive breakpoints.

If you change the default breakpoints's values, you need to provide them all:

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536,
    },
  },
});

Feel free to have as few or as many breakpoints as you want, naming them in whatever way you'd prefer for your project.

const theme = createTheme({
  breakpoints: {
    values: {
      mobile: 0,
      tablet: 640,
      laptop: 1024,
      desktop: 1200,
    },
  },
});

If you are using TypeScript, you would also need to use module augmentation for the theme to accept the above values.

declare module '@material-ui/core/styles' {
  interface BreakpointOverrides {
    xs: false; // removes the `xs` breakpoint
    sm: false;
    md: false;
    lg: false;
    xl: false;
    mobile: true; // adds the `mobile` breakpoint
    tablet: true;
    laptop: true;
    desktop: true;
  }
}

API

theme.breakpoints.up(key) => media query

Аргументы

  1. key (string | number): A breakpoint key (xs, sm, etc.) or a screen width number in px.

Возвращает

media query: A media query string ready to be used with most styling solutions, which matches screen widths greater than and including the screen size given by the breakpoint key.

Примеры

const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    // Match [md, ∞)
    //       [900px, ∞)
    [theme.breakpoints.up('md')]: {
      backgroundColor: 'red',
    },
  },
});

theme.breakpoints.down(key) => media query

Аргументы

  1. key (string | number): A breakpoint key (xs, sm, etc.) or a screen width number in px.

Возвращает

media query: A media query string ready to be used with most styling solutions, which matches screen widths less than and including the screen size given by the breakpoint key.

Примеры

const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    // Match [0, md)
    //       [0, 900px)
    [theme.breakpoints.down('md')]: {
      backgroundColor: 'red',
    },
  },
});

theme.breakpoints.only(key) => media query

Аргументы

  1. key (string): A breakpoint key (xs, sm, etc.).

Возвращает

media query: A media query string ready to be used with most styling solutions, which matches screen widths including the screen size given by the breakpoint key.

Примеры

const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    // Match [md, md + 1)
    //       [md, lg)
    //       [900px, 1200px)
    [theme.breakpoints.only('md')]: {
      backgroundColor: 'red',
    },
  },
});

theme.breakpoints.between(start, end) => media query

Аргументы

  1. start (string): A breakpoint key (xs, sm, etc.) or a screen width number in px.
  2. end (string): A breakpoint key (xs, sm, etc.) or a screen width number in px.

Возвращает

media query: A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key in the first argument and less than the the screen size given by the breakpoint key in the second argument.

Примеры

const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    // Match [sm, md)
    //       [600px, 900px)
    [theme.breakpoints.between('sm', 'md')]: {
      backgroundColor: 'red',
    },
  },
});

Default values

You can explore the default values of the breakpoints using the theme explorer or by opening the dev tools console on this page (window.theme.breakpoints).