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>

现在，按照上面的代码，我想基于屏幕尺寸使设计响应并添加断点，我该如何实现呢？另外，有什么方法可以处理浏览器的分辨率/缩放，我的设计是使用更大缩放的水平滚动。

Answer 1

网格已经响应。

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

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

while (!userInput.contains(",")) {
           System.out.print("Enter a string seperated by a comma: ");
           userInput = scnr.nextLine();
           if (!userInput.contains(",")) {
               System.out.println("Error, no comma present");
           }
           else {
               String string1;
               String string2;
               Scanner inSS = new Scanner(userInput);

               String commaHold;
               commaHold = inSS. //FIXME this is where the problem is
               string1 = inSS.next();
               string2 = inSS.next();
               System.out.println(string1 + " " + string2);
           }

       }

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网格中设置断点以使其响应

2 个答案: