Material-UI 组件仅在移动设备上溢出屏幕

Question

编辑：这是唯一有问题的页面。同一网站的其他页面显示正确。我用 React 和 Material-UI 制作了一个网页。顶部组件是Grid和Container。它在桌面上看起来不错，但在移动设备上......好吧......这是屏幕的一侧：创建了额外的空间（浅灰色），图片和卡片超出了屏幕最大宽度。标题（蓝色）和背景（浅蓝色）具有正确的宽度（屏幕的宽度）。我正在使用Grid和Container。这是包含卡片的根组件：<Grid  container  spacing={0}  direction="row"  justify="space-around"  alignItems="center"  style={{ minHeight: "20vh" }}> ....这是另一个改变宽度的容器：<Container maxWidth="lg" style={{ marginBottom: "5vh" }}>  <Paper style={{ padding: 20 }}>    <Grid      container      spacing={0}      direction="column"      justify="flex-start"      alignItems="center"    > ....正确显示的标题只是一个AppBar.顶部溢出的图像返回：<div className={classes.heroContent}>  <Container maxWidth="md" align="center">    <Grid      container      direction="column"      justify="flex-end"      alignItems="center"    > ...是classes.heroContent： heroContent: {    backgroundImage: `url(${grupo})`,    backgroundSize: "cover",    backgroundRepeat: "no-repeat",    backgroundPosition: "center",    padding: theme.spacing(8, 0, 8),    minHeight: "20vh",  }, ...造成这种溢出的原因可能是什么？我一直在阅读文档，但找不到该错误。

Answer 1

我已经解决了 这里有两个问题。

问题一：

作为卡片根组件的一个网格组件被指定为container但不是item。

问题1说明：

由于卡片位于Grid父组件的内部，因此还有一个item. 在我将所有内部Grid至少有一个的组件指定Grid为 a container，并将容器Grid内的所有组件Grid直接或间接指定为父组件，因为item它几乎可以工作。

问题2：

卡片内的介质尺寸和卡片边距的组合对于屏幕来说太大。解决方案是更改margin和width单位。

解释问题2：

卡片现在有这个CSS：

cards: {

    margin: "5vw",

    marginBottom: "0vh",

  },

  media: {

    height: "35vh",

    width: "45vw",

  },

问题出在单位上。我使用margin: '5vh'的边距是根据 vierport 的高度计算的。在高度大于宽度的视口（移动设备）中，高度的一小部分仍然大于宽度。