React MUI断点

MUI 是一个巨大的UI组件库，设计师和开发人员可以用它来构建React应用程序。MUI断点在Material-UI库中用于定义不同屏幕尺寸的不同样式。

MUI断点 基于标准的CSS断点，用于在不同设备上查看网站或应用程序时调整布局和设计。每个断点对应于特定的屏幕宽度范围，并允许开发人员创建适应不同屏幕尺寸的响应式设计。

默认断点：

xs（超小）： 当屏幕尺寸大于0像素时会触发。
sm（小）： 当屏幕尺寸大于或等于600像素时会触发。
md（中）： 当屏幕尺寸大于或等于900像素时会触发。
lg（大）： 当屏幕尺寸大于或等于1200像素时会触发。
xl（超大）： 当屏幕尺寸大于或等于1536像素时会触发。
断点中的CSS媒体查询：

CSS中的媒体查询用于根据显示设备的特征对网页应用不同的样式。它们允许开发人员创建适应不同屏幕尺寸、方向和设备其他特性的响应式设计。为此，该主题包含五个样式助手：

theme.breakpoints.up(key) = >在大于或等于给定的’key’值时触发。
theme.breakpoints.down(key) = >在小于或等于给定的’key’值时触发。
theme.breakpoints.only(key) = >仅在给定的’key’值时触发。
theme.breakpoints.not(key) = >在大于或小于给定的’key’值时触发，但不在’key’值处触发。
theme.breakpoints.between(start, end) = >在提供的键的范围（起始和结束）之间触发。

语法：

[theme.breakpoints.style(key)]: {
    cssProperty: value,
}

JavaScript媒体查询：

JavaScript媒体查询是使用JavaScript检查显示网页的设备的特性，如屏幕大小或分辨率的一种方法。这使开发人员能够创建响应式设计，根据设备的特性对页面上的元素应用不同的样式或行为以适应不同的设备。

语法：

const Breakpoint = useMediaQuery('(cssProperty: value)');

以上语法在“MediaQuery”匹配时返回“true”，否则返回“false”。

自定义断点：

自定义断点是除Material-UI提供的默认断点之外定义和使用的额外断点。这些断点用于根据屏幕大小创建更具体的样式或布局。可以使用 createTheme() 函数来定义自定义断点，该函数允许开发人员为断点指定自己的值。

语法：

const theme = createTheme({
    breakpoints: {
        values: {
            key1: value,
            // for example
            sm: 400,
            //or
            mobile: 200,
            laptop: 1000,
        },
    },
});

首先，我们将从在VS Code中创建一个React应用程序开始。

步骤1 ：通过在任何命令行中编写以下代码来创建React应用程序。

npx create-react-app app_name

步骤2： 然后，我们要进入我们将要工作的文件夹中。

cd project_name

步骤3: 我们将安装 @mui/material 库来进行我们的项目工作。

npm install @mui/material @emotion/react @emotion/styled

项目结构: 创建React App并安装了所有依赖项后，文件夹的结构将类似于下面给出的图示。

React MUI断点

npm start

示例1： 下面是使用自定义断点的JavaScript媒体查询的代码。

import * as React from 'react'; 
import useMediaQuery from '@mui/material/useMediaQuery'; 
import { Button, TextField, Box, Snackbar } from '@mui/material'; 
  
const SimpleMediaQuery = () => { 
    const Desktop = useMediaQuery('(min-width:1200px)'); 
    const Ipad = useMediaQuery('(min-width:1000px)'); 
    const Mobile = useMediaQuery('(min-width:800px)'); 
  
    return ( 
        <Box sx={{ 
            margin: '25px', marginTop: '100px', 
            display: 'flex', flexDirection: Mobile ? 'row' : 'column'
        }}> 
            <TextField label='Enter Name' sx={{ width: '250px' }} /> 
            <Button variant='contained'
                sx={{ margin: '10px', width: '100px' }}> 
                Submit 
            </Button> 
            <Snackbar 
                anchorOrigin={{ vertical: 'top', horizontal: 'left' }} 
                open={!Desktop} 
                onClose={Desktop} 
                autoHideDuration={2000} 
                message={!Desktop ? 'This is Desktop Screen' : ''} 
                key='1'
            /> 
            <Snackbar 
                anchorOrigin={{ vertical: 'top', horizontal: 'left' }} 
                open={!Ipad} 
                onClose={Ipad} 
                autoHideDuration={2000} 
                message={!Ipad ? 'This is Ipad Screen' : ''} 
                key='2'
            /> 
            <Snackbar 
                anchorOrigin={{ vertical: 'top', horizontal: 'left' }} 
                open={!Mobile} 
                onClose={Mobile} 
                autoHideDuration={2000} 
                message={!Mobile ? 'This is Mobile Screen' : ''} 
                key='3'
            /> 
        </Box> 
    ) 
}; 
  
export default SimpleMediaQuery;

输出：

React MUI断点

示例2: 在下面的示例中，我们将以不同的方式使用“sx”属性和默认断点，以“flex”属性为例。

import { Box } from '@mui/material'; 
  
const breakpoints = { 
   border: "1px solid black", 
   margin: 2, 
   flex: { xs: "100%", sm: "calc(50% - 50px)", 
    md: "calc(33% - 50px)", lg: "calc(25% - 50px)" }, 
}; 
  
const Break = () => { 
   return ( 
       <Box sx={{ display: "flex", flexWrap: "wrap", 
        textAlign: 'center' }}> 
           <Box sx={breakpoints}>One</Box> 
           <Box sx={breakpoints}>Two</Box> 
           <Box sx={breakpoints}>Three</Box> 
           <Box sx={breakpoints}>Four</Box> 
       </Box> 
   ); 
} 
  
export default Break;