代码之家 › 专栏 › 技术社区 › Jatin Goyal

ReactJS:材质ui断点

breakpoints material-ui media-queries responsive-design reactjs

3

Jatin Goyal · 技术社区 · 7 年前

两者有什么区别 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',
},

1 回复 | 直到 7 年前

1

34

Soroush Chehresa TommyF 6 年前

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

Breakpoint documentation

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

xs型 (特大):0px或更大

山猫

(中):960px或更大

(大):1280px或更大

(超大):1920像素或更大

up , down , between )是使用主题中定义的断点创建媒体查询的帮助程序。

注: breakpoints.up() 和 breakpoints.down() 也接受一个数字,它将被转换成像素。其他方法并非如此。

断点向上(断点编号)

最小宽度 目标屏幕大小大于或等于给定断点的媒体查询。

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

获取断点名称并创建 最大宽度 目标屏幕大小为的媒体查询包括

因为这是包含的,所以最大宽度将是上一个断点的值。

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

断点之间(开始,结束)

获取两个断点名称,并创建一个媒体查询,目标屏幕大小从第一个断点到第二个断点。

// 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