时间戳

首页 > 解决方案 > Material-UI 组件仅在移动设备上溢出屏幕

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

问题描述

编辑：这是唯一有问题的页面。同一网站的其他页面正确显示。

我用 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"
    > ....

正确显示的 Header 只是一个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",
  }, ...

这个溢出的原因可能是什么？我一直在阅读文档，但找不到错误。

标签： javascripthtmlcssreactjsmaterial-ui

解决方案

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

问题1：

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

问题1解释：

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

问题2：

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

解释问题2：

这些卡现在有这个 CSS：

cards: {
    margin: "5vw",
    marginBottom: "0vh",
  },
  media: {
    height: "35vh",
    width: "45vw",
  },

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

推荐阅读