斷點
此 API 讓斷點能夠在各種情境中使用。
為了獲得最佳的使用者體驗，Material Design 介面需要在各種斷點調整其版面配置。Material UI 使用原始規範的簡化實作。
斷點在內部用於各種元件，使其具有響應性，但您也可以透過 Grid 元件利用它們來控制應用程式的版面配置。
預設斷點
每個斷點（一個鍵）都與一個固定螢幕寬度（一個值）匹配
- xs, 超小型：0px
- sm, 小型：600px
- md, 中型：900px
- lg, 大型：1200px
- xl, 超大型：1536px
這些值可以自訂。
CSS Media Queries
CSS media queries 是使您的 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 Media Queries
有時，僅使用 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) => media query
引數
key(string | number)：斷點鍵 (xs、sm等) 或螢幕寬度數字 (px)。
回傳
media query：一個媒體查詢字串，準備好與大多數樣式解決方案一起使用，它匹配大於斷點鍵給定的螢幕尺寸（包含）的螢幕寬度。
範例
const styles = (theme) => ({
root: {
backgroundColor: 'blue',
// Match [md, ∞)
// [900px, ∞)
[theme.breakpoints.up('md')]: {
backgroundColor: 'red',
},
},
});
theme.breakpoints.down(key) => media query
引數
key(string | number)：斷點鍵 (xs、sm等) 或螢幕寬度數字 (px)。
回傳
media query：一個媒體查詢字串，準備好與大多數樣式解決方案一起使用，它匹配小於斷點鍵給定的螢幕尺寸（排除）的螢幕寬度。
範例
const styles = (theme) => ({
root: {
backgroundColor: 'blue',
// Match [0, md)
// [0, 900px)
[theme.breakpoints.down('md')]: {
backgroundColor: 'red',
},
},
});
theme.breakpoints.only(key) => media query
引數
key(string)：斷點鍵 (xs、sm等)。
回傳
media query：一個媒體查詢字串，準備好與大多數樣式解決方案一起使用，它匹配從斷點鍵給定的螢幕尺寸（包含）開始，到下一個斷點鍵給定的螢幕尺寸（排除）結束的螢幕寬度。
範例
const styles = (theme) => ({
root: {
backgroundColor: 'blue',
// Match [md, md + 1)
// [md, lg)
// [900px, 1200px)
[theme.breakpoints.only('md')]: {
backgroundColor: 'red',
},
},
});
theme.breakpoints.not(key) => media query
引數
key(string)：斷點鍵 (xs、sm等)。
回傳
media query：一個媒體查詢字串，準備好與大多數樣式解決方案一起使用，它匹配到斷點鍵給定的螢幕尺寸（排除）結束，並從下一個斷點鍵給定的螢幕尺寸（包含）開始的螢幕寬度。
範例
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) => media query
引數
start(string)：斷點鍵 (xs、sm等) 或螢幕寬度數字 (px)。end(string)：斷點鍵 (xs、sm等) 或螢幕寬度數字 (px)。
回傳
media query：一個媒體查詢字串，準備好與大多數樣式解決方案一起使用，它匹配大於第一個引數中斷點鍵給定的螢幕尺寸（包含）且小於第二個引數中斷點鍵給定的螢幕尺寸（排除）的螢幕寬度。
範例
const styles = (theme) => ({
root: {
backgroundColor: 'blue',
// Match [sm, md)
// [600px, 900px)
[theme.breakpoints.between('sm', 'md')]: {
backgroundColor: 'red',
},
},
});
預設值
您可以使用主題瀏覽器或在本頁面上開啟開發人員工具控制台 (window.theme.breakpoints) 來探索斷點的預設值。