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 使用以下一组断点。可以在主题中自定义这个断点的values。

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(断点|数字)

采用断点名称并创建一个 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

ReactJS：Material ui 断点

ReactJS: Material ui breakpoints

breakpoints

media-queries

responsive-design

reactjs

material-ui

breakpoints.up(断点|数字)

breakpoints.down(断点|数字)

breakpoints.between（开始，结束）

breakpoints.values

breakpoints.width(断点)