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

【问题标题】：How to set breakpoints in Material ui grid to make it responsive如何在 Material ui 网格中设置断点以使其响应
【发布时间】：2020-03-26 21:53:04
【问题描述】：

我正在使用 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>

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

【问题讨论】：

标签： css grid material-ui responsive

【解决方案1】：

为了使这项工作导入

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

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

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>

【讨论】：

【解决方案2】：

网格已经响应。

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

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

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

【讨论】：