Material ui appbar 在移动设备上不会缩小

Posted 2023-03-31

【中文标题】Material ui appbar 在移动设备上不会缩小

【英文标题】：Material ui appbar doesn't scale down when on mobile

【发布时间】：2018-06-27 04:11:28

【问题描述】：

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

当我将网站缩放到移动设备大小时，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"
                
                floated="left"
                verticalAlign="middle"
                src="https://admin.neruti.com/wp-content/uploads/2017/11/neruti_logo_inverted_400x400.png"
                
              />
            </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 的样式，而是创建了一个新的标题组件，仅用于移动屏幕大小。然后，使用 react responsive media queries（如React responsive 所示）检查屏幕是移动设备还是桌面设备，以找出要执行的标题组件。

代码示例：

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

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

我希望这个解决方案能帮助任何面临同样问题的人:)

【问题讨论】：

阅读：Responsive Web Design - Media Queries

另一种方法是使用这个：material-ui.com/components/drawers/#responsive-drawer

【参考方案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"
/>