Javascript 宽度减小时调整导航栏组件的大小？

我有一个带有以下css设置的Web应用程序导航栏：

.navigation {
    background: white;
    display: flex;
    height: 5em;
    align-items: center;
    padding: 0px 2em;
    color: blue;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    border-bottom: 1px solid #E6E6E6;}

---

我的问题是在手机上，导航栏上的标签都挤在一起了。在React中是否有一种方法可以检测页面的宽度并将所有导航选项卡折叠到下拉菜单中？或者这是一个CSS功能？

如果您想在mobile上呈现下拉菜单，这里有一个策略：

侦听中的媒体查询更改：

使用该侦听器更新组件上的

this.state

（例如：

this.state.isMobile

）

根据媒体查询条件呈现不同的导航组件（例如：

this.state.isMobile？：

）

---

如果要在mobile上呈现下拉菜单，有一个策略：

侦听中的媒体查询更改：

使用该侦听器更新组件上的

this.state

（例如：

this.state.isMobile

）

根据媒体查询条件呈现不同的导航组件（例如：

this.state.isMobile？：

）

---

您可以使用适当的媒体查询在CSS中处理此问题

但是，如果您更喜欢使用React执行此操作，下面是如何实现此操作的，请收听窗口“调整大小”事件：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
layoutMode:this.getLayoutMode（），
};
this.onResize=this.onResize.bind（this）；
}
componentDidMount（）{
window.addEventListener（'resize'，this.onResize）；
}
组件将卸载（）{
window.removeEventListener（'resize'，this.onResize）；
}
onResize（）{
这是我的国家({
layoutMode:this.getLayoutMode（），
});
}
getLayoutMode（）{
返回窗口。内部宽度>1000？
“桌面”
：“手机”；
}
render（）{
返回this.state.layoutMode==='desktop'(
) : (
);
}
}

您可以在CSS中使用适当的媒体查询来处理此问题

但是，如果您更喜欢使用React执行此操作，下面是如何实现此操作的，请收听窗口“调整大小”事件：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
layoutMode:this.getLayoutMode（），
};
this.onResize=this.onResize.bind（this）；
}
componentDidMount（）{
window.addEventListener（'resize'，this.onResize）；
}
组件将卸载（）{
window.removeEventListener（'resize'，this.onResize）；
}
onResize（）{
这是我的国家({
layoutMode:this.getLayoutMode（），
});
}
getLayoutMode（）{
返回窗口。内部宽度>1000？
“桌面”
：“手机”；
}
render（）{
返回this.state.layoutMode==='desktop'(
) : (
);
}
}

说真的，你最好的选择是css。让react专注于DOM的结构和交互。让css处理样式设置

因此，您可以保持代码的简单性，如下所示：

render() {
  var myMenu = ['Home','Settings','About us', 'Other stuff'];
  return (
    <div>
      <button className='hamburger'>m</button>
      <ul className='menu'>
        {myMenu.map(item => {
          return <MenuItem key={item} text={item}/>
        })}
      </ul>
    </div>    
  );
}

---

你可以找到一个。说真的，你最好的选择是css。让react专注于DOM的结构和交互。让css处理样式设置

因此，您可以保持代码的简单性，如下所示：

render() {
  var myMenu = ['Home','Settings','About us', 'Other stuff'];
  return (
    <div>
      <button className='hamburger'>m</button>
      <ul className='menu'>
        {myMenu.map(item => {
          return <MenuItem key={item} text={item}/>
        })}
      </ul>
    </div>    
  );
}

---

你可以找到一个。

这是一个css的东西。有了css，使用flexbox、max-min width、@media设置等来实现这一点非常简单。要使React a）了解宽度，b）根据宽度应用样式，需要很多技巧。一般来说，使用css进行样式设计，使用react进行HTML结构+逻辑。我计划使用css来解决这个问题。我在这方面比较新，所以我不确定你提到的参数。flexbox是否允许快速修复？尝试将其用作导航栏这是一个css功能。有了css，使用flexbox、max-min width、@media设置等来实现这一点非常简单。要使React a）了解宽度，b）根据宽度应用样式，需要很多技巧。一般来说，使用css进行样式设计，使用react进行HTML结构+逻辑。我计划使用css来解决这个问题。我在这方面比较新，所以我不确定你提到的参数。flexbox是否允许快速修复？尝试将其用作导航栏它有点不错我尝试过，效果很好。然而，正如你提到的，你说你可以用CSS处理它？这是什么方法？我的设置是不是犯了新手错误？我试过了，效果很好。然而，正如你提到的，你说你可以用CSS处理它？这是什么方法？我在设置上犯了新手错误吗？按钮。汉堡：焦点+ul。菜单这是一件时髦的事吗？我目前只使用CSS，我想知道是否有类似CSS的解决方案？“+”是纯CSS。它的意思是“focus by”，所以带有焦点的按钮后跟ul是选择器，ul得到样式。按钮。汉堡：focus+ul。菜单这是SASS吗？我目前只使用CSS，我想知道是否有类似CSS的解决方案？“+”是纯CSS。它的意思是“后跟”，所以焦点后跟ul的按钮是选择器，ul获得样式。

ul.menu
  position: absolute
  display: flex
  flex-direction: row
  width: 100%

li.menu-item
  flex: 1 0 auto
  padding: 10px
  margin: 2px
  background-color: grey
  text-align: center

li.menu-item:hover
  background-color: blue

button.hamburger
  display: none
  padding: 10px
  margin: 2px
  background-color: grey

@media screen and (max-width : 760px)
  ul.menu
    flex-direction: column
    display: none

  li.menu-item
    background-color: orange

  button.hamburger
    display: block
    position: absolute

  button.hamburger:focus + ul.menu
    display: flex