断点
一个 API，支持在各种上下文中使用断点。
为了获得最佳用户体验，Material Design 界面需要在不同的断点处调整其布局。Material UI 使用了原始规范的简化实现。
断点在内部被各种组件使用，以使它们具有响应性，但您也可以通过 Grid 组件利用它们来控制应用程序的布局。
默认断点
每个断点（一个键）都匹配一个固定的屏幕宽度（一个值）
- xs, 超小型：0px
- sm, 小型：600px
- md, 中型：900px
- lg, 大型：1200px
- xl, 超大型：1536px
这些值可以自定义。
CSS 媒体查询
CSS 媒体查询是使您的 UI 具有响应性的惯用方法。主题提供了五个样式助手来做到这一点
- theme.breakpoints.up(key)
- theme.breakpoints.down(key)
- theme.breakpoints.only(key)
- theme.breakpoints.not(key)
- theme.breakpoints.between(start, end)
在以下演示中，我们根据屏幕宽度更改背景颜色（红色、蓝色和绿色）。
const styles = (theme) => ({
root: {
padding: theme.spacing(1),
[theme.breakpoints.down('md')]: {
backgroundColor: theme.palette.secondary.main,
},
[theme.breakpoints.up('md')]: {
backgroundColor: theme.palette.primary.main,
},
[theme.breakpoints.up('lg')]: {
backgroundColor: green[500],
},
},
});
down(md): 红色
up(md): 蓝色
up(lg): 绿色
JavaScript 媒体查询
有时，仅使用 CSS 是不够的。您可能希望在 JavaScript 中，根据断点值更改 React 渲染树。
useMediaQuery Hook
您可以在 useMediaQuery 页面上了解更多信息。
自定义断点
您在主题的 theme.breakpoints 部分中定义项目的断点。
theme.breakpoints.values: 默认为上述值。键是您的屏幕名称，值是该断点应开始的最小宽度。theme.breakpoints.unit: 默认为'px'。用于断点值的单位。theme.breakpoints.step: 默认为5。增量除以 100 用于实现独占断点。例如，{ step: 5 }意味着down(500)将导致'(max-width: 499.95px)'。
如果您更改默认断点的值，则需要提供所有值
const theme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1200,
xl: 1536,
},
},
});
随意拥有任意数量的断点，并以您希望的任何方式为您的项目命名。
const theme = createTheme({
breakpoints: {
values: {
mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1200,
},
},
});
如果您正在使用 TypeScript，您还需要使用模块扩充，以便主题接受上述值。
declare module '@mui/material/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) => 媒体查询
参数
key(string | number): 断点键（xs、sm等）或屏幕宽度数字（以像素为单位）。
返回值
媒体查询：一个媒体查询字符串，可用于大多数样式解决方案，它匹配大于断点键给定的屏幕尺寸（包括）的屏幕宽度。
示例
const styles = (theme) => ({
root: {
backgroundColor: 'blue',
// Match [md, ∞)
// [900px, ∞)
[theme.breakpoints.up('md')]: {
backgroundColor: 'red',
},
},
});
theme.breakpoints.down(key) => 媒体查询
参数
key(string | number): 断点键（xs、sm等）或屏幕宽度数字（以像素为单位）。
返回值
媒体查询：一个媒体查询字符串，可用于大多数样式解决方案，它匹配小于断点键给定的屏幕尺寸（不包括）的屏幕宽度。
示例
const styles = (theme) => ({
root: {
backgroundColor: 'blue',
// Match [0, md)
// [0, 900px)
[theme.breakpoints.down('md')]: {
backgroundColor: 'red',
},
},
});
theme.breakpoints.only(key) => 媒体查询
参数
key(string): 断点键（xs、sm等）。
返回值
媒体查询：一个媒体查询字符串，可用于大多数样式解决方案，它匹配从断点键给定的屏幕尺寸（包括）开始，到下一个断点键给定的屏幕尺寸（不包括）结束的屏幕宽度。
示例
const styles = (theme) => ({
root: {
backgroundColor: 'blue',
// Match [md, md + 1)
// [md, lg)
// [900px, 1200px)
[theme.breakpoints.only('md')]: {
backgroundColor: 'red',
},
},
});
theme.breakpoints.not(key) => 媒体查询
参数
key(string): 断点键（xs、sm等）。
返回值
媒体查询：一个媒体查询字符串，可用于大多数样式解决方案，它匹配到断点键给定的屏幕尺寸（不包括）结束，并从下一个断点键给定的屏幕尺寸（包括）开始的屏幕宽度。
示例
const styles = (theme) => ({
root: {
backgroundColor: 'blue',
// Match [xs, md) and [md + 1, ∞)
// [xs, md) and [lg, ∞)
// [0px, 900px) and [1200px, ∞)
[theme.breakpoints.not('md')]: {
backgroundColor: 'red',
},
},
});
theme.breakpoints.between(start, end) => 媒体查询
参数
start(string): 断点键（xs、sm等）或屏幕宽度数字（以像素为单位）。end(string): 断点键（xs、sm等）或屏幕宽度数字（以像素为单位）。
返回值
媒体查询：一个媒体查询字符串，可用于大多数样式解决方案，它匹配大于第一个参数中断点键给定的屏幕尺寸（包括）且小于第二个参数中断点键给定的屏幕尺寸（不包括）的屏幕宽度。
示例
const styles = (theme) => ({
root: {
backgroundColor: 'blue',
// Match [sm, md)
// [600px, 900px)
[theme.breakpoints.between('sm', 'md')]: {
backgroundColor: 'red',
},
},
});
默认值
您可以使用主题浏览器或通过在此页面上打开开发者工具控制台 (window.theme.breakpoints) 来探索断点的默认值。