ReactJS：材质 ui 断点

Question

breakpoints.up、breakpoints.down、breakpoints.between 和 breakpoints.value 之间有什么区别？ 这段代码是什么意思，断点值是如何在这里工作的？是theme.spacing.unit*2*2 = theme.spacing.unit*4还是有别的意思？

[theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]: {
  width: 600,
  marginLeft: 'auto',
  marginRight: 'auto',
},

Answer 1

Material 使用以下一组断点。您可以在主题中自定义此断点的值。

Breakpoint documentation

断点是具有特定布局要求的预定屏幕尺寸范围。

• xs（超小）：0px 或更大
• sm（小）：600 像素或更大
• md（中等）：960 像素或更大
• lg（大）：1280 像素或更大
• xl（超大）：1920 像素或更大

您询问的函数（up、down、between）是使用主题中定义的断点创建媒体查询的助手。

注意：breakpoints.up() 和 breakpoints.down() 也接受一个数字，该数字将转换为像素。这不适用于其他方法。

breakpoints.up(断点|数字)

创建一个 min-width 媒体查询，以大于或等于给定断点的屏幕尺寸为目标。

// Styles will be applies to screen sizes from "sm" and up
[theme.breakpoints.up('sm')]: {
  // styles
}

breakpoints.down(断点|数字)

采用断点名称并创建 ma​​x-width 媒体查询，目标屏幕尺寸最大为并包括给定断点。

因为这是包容性的，所以 max-width 将是下一个断点的值。

// Styles will be applies to screen sizes from 0 up to and including "md"
[theme.breakpoints.down('md')]: {
  // styles
}

breakpoints.between(start, end)

采用两个断点名称，并创建一个媒体查询，以从第一个断点到并包括第二个断点的屏幕尺寸为目标。

// Styles will be applies to screen sizes from "sm" up to
// and including "lg"
[theme.breakpoints.between('sm', 'lg')]: {
  // styles
}

---

breakpoints.values

包含主题中定义的断点值的对象

{xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920}

breakpoints.width(断点)

该函数用于获取特定断点的值。

theme.breakpoints.width('sm')  // => 600