Question

我已经在网站顶部创建了Material-ui应用栏，如下所示：Website Appbar

当我将网站缩放到移动大小时，应用栏对屏幕无响应：Appbar when in mobile size

这是有关我的appBar设计方式的代码：

  <MuiThemeProvider theme={theme}>
        <AppBar color="primary" style={{ position: 'absolute' }} >
          <Toolbar style={{ marginRight: 'auto', marginLeft: 'auto' }}>
            <Button basic href="http://localhost:3006/home">
              <Image
                spaced="left"
                height="40px"
                floated="left"
                verticalAlign="middle"
                src="https://admin.neruti.com/wp-content/uploads/2017/11/neruti_logo_inverted_400x400.png"
                alt="logo"
              />
            </Button>

            {menu.items.map((item) => {
          if (item.menu_item_parent === '0') {
            const menuList = menu.items.filter(
              i => i.menu_item_parent === item.ID.toString(),
            );
            if (menuList.length === 0) {
              return (
                <Button
                  style={{ marginRight: '3vw', color: '#D8EDFE' }}
                  as="a"
                  key={item.ID}
                  link
                  href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
                >
                  {item.title}
                </Button>
              );
            }

            return (
              <div>
                <Button style={{ marginRight: '3vw', color: '#D8EDFE' }}>
                  <Dropdown item text={item.title} key={item.ID}>
                    <Dropdown.Menu>
                      {menuList.map(i => (
                        <Dropdown.Item
                          key={i.ID}
                          href={`/${item.url.split(config.wp_url)[1].slice(0,
                          -1)}/${i.url.split(config.wp_url)[1].slice(0, -1)}`}
                        >
                          {i.title}
                        </Dropdown.Item>
                    ))}
                    </Dropdown.Menu>
                  </Dropdown>
                </Button>
              </div>
            );
          }
          return null;
        })}
          </Toolbar>
        </AppBar>
      </MuiThemeProvider>

我需要一些额外的代码来调整Appbar的大小吗？

我该如何解决这个问题？

问题已解决的更新

经过大量的研究和工作，我已经解决了该问题，并且希望与您分享解决方案。

我没有改变AppBar的样式，而是最终创建了一个仅用于移动屏幕尺寸的新标题组件。然后，使用{em>反应式媒体查询（如此处React responsive所示）检查屏幕是移动的还是台式的，以找出要执行的标题组件。

代码示例：

  <div>
        <MediaQuery maxWidth={1224}>
          <MobileFixedMenu menu={menu} config={config} />
        </MediaQuery>

        <MediaQuery minWidth={1224}>
          <FixedMenu menu={menu} config={config} />
        </MediaQuery>
  </div>

我希望该解决方案将对遇到相同问题的所有人有所帮助:)

Answer 1

我遇到了同样的问题，我在这里找到了答案：https://github.com/mui-org/material-ui/issues/7130

您需要处理index.html文件中的视口，例如：

<meta
    name="viewport"
    content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"
/>

在移动设备上，实质性ui应用程序栏不会缩小

1 个答案: