简体   繁体   English

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

[英]How to set breakpoints in Material ui grid to make it responsive

I am using Material ui Grid to arrange my ui elements.我正在使用 Material ui Grid来排列我的 ui 元素。 Below is my code下面是我的代码

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

Now, as per the above code, i want to make design responsive based on screen sizes and add breakpoints, how can i achieve it?现在,根据上面的代码,我想根据屏幕尺寸进行设计响应并添加断点,我该如何实现? Also, is there any way to handle the browser resolution/zoom, my design goes to horizontal scroll with bigger zoom.另外,有什么方法可以处理浏览器分辨率/缩放,我的设计以更大的缩放进行水平滚动。

The Grid is already responsive.网格已经响应。

Setting md to be below 12 to set breakpoints for lager screens.将 md 设置为低于 12 以设置更大屏幕的断点。 For even larger screens use lg and xl.对于更大的屏幕,请使用 lg 和 xl。 It will respect browser resolution/zoom and will automatically put components in a new line, if the screen size is below the given break point.如果屏幕尺寸低于给定的断点,它将尊重浏览器分辨率/缩放并自动将组件放在新行中。

To add custom break points, you can add these options to create mui theme:要添加自定义断点,您可以添加以下选项来创建 mui 主题:

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

To make this work import使这项工作导入

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

As stated above you use the following code to set your breakpoints.如上所述,您可以使用以下代码来设置断点。 You are not limited to the pre defined names you can use any name you want.您不仅可以使用预定义的名称,还可以使用任何您想要的名称。 The values are the min-width for the breaking point.这些值是断点的最小宽度。 So in this case XS stops at 449px.所以在这种情况下,XS 在 449px 处停止。

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

You then have to use a theme provider to implement it.然后,您必须使用主题提供程序来实现它。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM