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(小):600px或更大
• md (中):960px或更大
• lg (大):1280px或更大
• xl (超大):1920px或更大

你问的功能(up,down,between)是创建使用该主题定义的断点媒体查询助手.

breakpoints.up(断点|数字)

创建一个最小宽度的媒体查询,该查询的目标屏幕大小大于或等于给定的断点.

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

注意:breakpoints.up()也接受一个数字,它将转换为像素.其他方法则不然.

breakpoints.down(断点)

获取断点名称并创建一个最大宽度的媒体查询,该查询的目标是屏幕大小,包括给定的断点.

因为这是包容性的,所以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
}

breakpoints.values

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

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

breakpoints.width(断点)

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

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