В этой статье я хотел бы поделиться с вами тем, как создать адаптивный веб-сайт с Material UI.

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

Схема

  1. Как использовать медиазапрос
  2. Как использоватьMediaQuery
  3. Как установить и использовать theme.breakpoints
  4. Как использовать theme.breakpoints

Как использовать медиазапрос

Как вы, возможно, уже знакомы с повседневным использованием CSS и т. д., медиа-запрос также можно использовать в пользовательском интерфейсе материалов.

<Box component="span" sx={{
    fontSize: "1rem",
    "@media screen and (min-width:600px)": {
        width: ".8rem",
    },
}} >
    YOUR TEXT HERE !
</Box>

Единственное отличие от повседневного медиа-запроса заключается в том, что его нужно заключать в «‘’» или «»».

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

Как использоватьMediaQuery

Следующий useMediaQuery уникален для Material UI.

Он предназначен для использования в React и возвращает результат true или false.
Поведение аналогично useState.

import { useMediaQuery } from "@mui/material";
import Link from "next/link";

const navBar = () => {
    const matches: boolean = useMediaQuery("(min-width:600px)");
    {matches ? (
        <Box component="div">
            <Link href="/" passHref>
                <Button color="secondary">BUTTON</Button>
            </Link>
        </Box>
    ) : (
        <Box></Box>
    )}

В приведенном выше примере для ширины экрана устанавливается значение true, если ширина экрана составляет 600 пикселей или больше, и значение false, если ширина экрана составляет 600 пикселей или меньше, а кнопки отображаются отдельно, когда значение MATCHES равно true, а когда — false.

Вы также можете использовать точки останова Material UI, чтобы описать это.

const matches: boolean = useMediaQuery(() => theme.breakpoints.up("sm"));

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

Это может быть очень полезно, если вы хотите анимировать элементы с помощью useEffect и т. д.

Как установить и использовать контрольные точки темы

Метод использования контрольных точек темы заключается в использовании темы пользовательского интерфейса Material, представленной ранее.

Пользовательский интерфейс материалов может быть адаптирован к стилю, установив что-то, называемое точками останова.

Начальные значения

  • xs: 0
  • sm: 600
  • md: 900
  • lg: 1200
  • xl: 1536

Вы можете попасть в точку останова в любой позиции, выполнив следующие действия.

import { createTheme } from "@mui/material/styles";

let theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 768,
      lg: 1025,
      xl: 1536,
    },
  },

Фактический метод использования точек останова заключается в использовании их в свойстве sx, как показано ниже.
В этом случае ширина составляет 600 пикселей или больше, используется блок, а для 599 пикселей или меньше установлено значение «нет».

<Box
  component="div"
  sx={{
    display: { xs: "none", sm: "block" },
  }}
 >
   <Link href="/" passHref>
     <Button color="secondary">BUTTON</Button>
   </Link>
 </Box>

Я чувствую, что этот метод проще всего увидеть при использовании Material UI.
С точки зрения нескольких реализаций, кажется, что он обеспечивает единообразие и предотвращает ошибки.

Краткое содержание

В этой статье мы показали, как реагировать на стили с помощью Material UI.

Лично я думаю, что его легче читать и обобщать.

  • Установить и использовать theme.breakpoints

— это хороший способ использования Material UI с точки зрения удобочитаемости и универсальности.

В пользовательском интерфейсе материалов есть еще несколько интересных элементов, которые я хотел бы представить еще раз.

Спасибо за чтение.