В этой статье я хотел бы поделиться с вами тем, как создать адаптивный веб-сайт с Material UI.
Материальный пользовательский интерфейс имеет несколько методов адаптивного стиля, и недавно у меня была возможность сделать свой веб-сервис адаптивным. Поэтому я представлю их здесь.
Схема
- Как использовать медиазапрос
- Как использоватьMediaQuery
- Как установить и использовать theme.breakpoints
- Как использовать 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 с точки зрения удобочитаемости и универсальности.
В пользовательском интерфейсе материалов есть еще несколько интересных элементов, которые я хотел бы представить еще раз.
Спасибо за чтение.