小屏如何調整MUI卡的大小？

Question

卡片寬度在小屏幕上看起來太小了，我該如何調整它的寬度？

我在代碼沙箱中重新創建了這個：https://codesandbox.io/s/nameless-darkness-d8tsq9?file=/demo.js

對於此屏幕尺寸，寬度太小：

代碼：

export default function ImgMediaCard() {
  return (
    <section style={{ padding: "5rem", flexGrow: "1" }}>
      <Box sx={{ display: "flex", justifyContent: "center", flexWrap: "wrap" }}>
        <Card sx={{ maxWidth: 350, margin: "1rem" }}>
          <CardMedia
            component="img"
            alt="green iguana"
            height="200"
            image="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
          />
          <CardContent>
            <Typography gutterBottom variant="h5" component="div">
              Lizard
            </Typography>
            <Typography variant="body2" color="text.secondary">
              Lizards are a widespread group of squamate reptiles, with over
              6,000 species, ranging across all continents except Antarctica
            </Typography>
          </CardContent>
          <CardActions>
            <Button size="small">Share</Button>
            <Button size="small">Learn More</Button>
          </CardActions>
        </Card>
        {/* 2nd card */}
        <Card sx={{ maxWidth: 350, margin: "1rem" }}>
          <CardMedia
            component="img"
            alt="green iguana"
            height="200"
            image="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
          />
          <CardContent>
            <Typography gutterBottom variant="h5" component="div">
              Lizard
            </Typography>
            <Typography variant="body2" color="text.secondary">
              Lizards are a widespread group of squamate reptiles, with over
              6,000 species, ranging across all continents except Antarctica
            </Typography>
          </CardContent>
          <CardActions>
            <Button size="small">Share</Button>
            <Button size="small">Learn More</Button>
          </CardActions>
        </Card>
      </Box>
    </section>
  );
}

Answer 1

我在下面的部分找到了padding 5rem ，這就是為什么你在小屏幕上沒有得到太多空間的原因。 除了內聯填充，您可以添加 class 並在 CSS 文件中定義填充，並對將解決您的問題的小型設備使用媒體查詢。

<section style={{ padding: "5rem", flexGrow: "1" }}>