如何在 Material ui 网格中设置断点使其响应

Question

我正在使用 Material ui Grid 来排列我的 ui 元素。下面是我的代码

<Grid container spacing={3}>
<Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRight: '1%' }}>
<Grid item xs={7} sm={7} md={7}>
   <label className={classes.title}> Title </label>
</Grid>
<Grid item xs={5} sm={5} md={5}>
   <label style = {{marginLeft: '25%'}}> Lable 1 </label>
   <label> Lable 2 </label>
</Grid>
</Grid>

现在，根据上面的代码，我想让设计根据屏幕尺寸进行响应并添加断点，我该如何实现？另外，有没有办法处理浏览器resolution/zoom，我的设计是水平滚动，缩放更大。

Answer 1

网格已经响应。

将 md 设置为低于 12 以设置更大屏幕的断点。对于更大的屏幕，请使用 lg 和 xl。如果屏幕尺寸低于给定的断点，它将尊重浏览器 resolution/zoom 并自动将组件放在新行中。

要添加自定义断点，您可以添加这些选项来创建 mui 主题：

const theme = createMuiTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 450,
      md: 600,
      lg: 900,
      xl: 1200
    }
  }
});

Answer 2

要导入此作品

import {createMuiTheme,ThemeProvider} from "@material-ui/core/styles"

如上所述，您使用以下代码设置断点。您不限于可以使用任何您想要的预定义名称。这些值是断点的最小宽度。所以在这种情况下，XS 停在 449px。

const theme = createMuiTheme({
 breakpoints: {
   values: {
    xs: 0,
    sm: 450,
    md: 600,
    lg: 900,
    xl: 1200,
    tablet:1024
  }
}
});

然后您必须使用主题提供程序来实现它。

<ThemeProvider theme={theme}>
   <Grid container><Grid item xs={12}>Some stuff</Grid></Grid>
</ThemeProvider>

如何在 Material ui 网格中设置断点使其响应

How to set breakpoints in Material ui grid to make it responsive

css

grid

material-ui

responsive