1

我正在开发一个网站，我在其中使用组件进行暗模式显示，但是在缩小到 600 像素以下的同时，组件缩小得太多，而不是其他组件。

我的应用程序：

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <ThemeChanger>
        <Paper square elevation={0}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </Paper>
      </ThemeChanger>
    </>
  );
 }

以下是一些示例图片：

这是宽度大于 700 像素的 UI 图像

这是宽度大于 700 像素的 UI 图像

这是一张宽度小于 600 像素的图片

这是一张宽度小于 600 像素的图片

我已经尝试添加 flex , min-width : "100%" at component 所有其他组件的行为都很好，除了组件

TechStack 我正在使用 NextJS v11 Material Ui v5

4

1 回答 1

0

无法通过查看整个 CSS 找到解决方案。

对我来说，父元素的大小限制似乎阻碍了子元素的成长。如果父元素具有固定大小或没有 100% 宽度，您将无法使子元素占据全宽。

检查两个屏幕上的元素和图形是什么 css 阻塞宽度 100%。

于 2021-09-06T04:24:07.843 回答