Question

我正在努力使用Material-ui的“ xs”流体网格（即移动设备的响应视图）来获取页面宽度以正确调整尺寸。

使用较大的页面宽度（“ sm”大小）时，我的测试将使用预期的填充进行渲染，但是当我将屏幕尺寸减小到〜<700 px时，卡的高度不会增加并且文本的边缘迷路了。

下面是一个在文本两边都带有填充的示例：

缩小屏幕宽度时，不执行填充操作，纸张高度也不会增加，因此右侧的文本被隐藏：

这是我的示例代码：

import React from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const styles = (theme) => ({
  root: {
    flexGrow: 1,
    padding: 20
  }
});

class Test extends React.Component {
  render() {
    const {classes} = this.props;

    return (
      <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12} sm={12}>
            <Paper>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur.
            </Paper>
          </Grid>
          <Grid item xs={12} sm={12}>
            <Paper>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur.
            </Paper>
          </Grid>
        </Grid>
      </div>
    );
  }
}

export default withStyles(styles)(Test);

有人可以建议如何使用较小的屏幕宽度来正确调整宽度吗？

Answer 1

我的天哪。令人尴尬的是，我在项目CSS的其他位置设置了最小宽度。

感谢@Ryan Cogswell的评论，该课程是在普通环境中测试的；）

Material-UI-自适应网格不会在移动宽度上调整大小

1 个答案: