ReactJS:Material 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

A breakpoint is the range of predetermined screen sizes that have specific layout requirements.

• xs (extra-small): 0px or larger
• sm (small): 600px or larger
• md (medium): 960px or larger
• lg (large): 1280px or larger
• xl (extra-large): 1920px or larger

您询问的函数(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 媒体查询，该查询的目标屏幕尺寸最大为并包括给定的断点。

因为这是包含在内的，所以最大宽度将是下一个断点的值。

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

断点. 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}

断点.宽度(断点)

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

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