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

材质使用以下断点集。您可以在主题中自定义此断点的 值 。

断点文档

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

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

你问的功能（up，down，between）是创建使用该主题定义的断点媒体查询助手。

注意：breakpoints.up()并且breakpoints.down()还接受一个数字，该数字将转换为像素。其他方法则不是这样。

breakpoints.up（breakpoint | number）

创建 最小宽度的 媒体查询，该查询的目标是屏幕尺寸大于或等于给定的断点。

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

breakpoints.down（breakpoint | number）

使用断点名称并创建 最大宽度的 媒体查询，该查询的 最大 屏幕尺寸为给定断点（ 包括 给定断点）。

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

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

breakpoints.between（开始，结束）

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

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

断点值

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

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

breakpoints.width（breakpoint）

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

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