javascript - CSS/JS/Jquery - 响应屏幕尺寸的 Flex 元素

Question

我有一个网站，我的导航中有 3 个元素，我想将其保留在一行中。

• 第一个是主菜单，其中包含主要站点链接，应该在导航栏的左侧。
• 第二个是联系方式它应该位于导航栏的中央。
• 第三个是授权菜单，其中有登录/帐户链接等，应该在右边导航栏。

#nav{
  height:50px;
  width:100%;
  position:relative;
  display:flex; 
}
ul{
  display:inline-block;
  height:50px;
  line-height:50px;
  list-style:none;
}
li{
  display:inline-block;
}
#main_menu{
  flex:3;
  text-align:left;
}
#header_numbers{
  flex:4;
  text-align:center;
}
#auth_menu{
  flex:3;
  text-align:right;
}

<div id="nav">
<ul id="main_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
<ul id="header_numbers">
  <li>menu item 1</li>
  <li>menu item 2</li>
</ul>
<ul id="auth_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
</div>

如果屏幕太小，不同的菜单会掉到另一行，但我想要发生的是隐藏在中心的带有联系信息的菜单，并且只有左右两个菜单，所以所有内容都保留在一个行。

我不确定是否有办法仅使用 CSS 来实现这一点，除非我执行类似 @media only screen and (max-width: 500px) 的查询，但我宁愿只是将移动/桌面的这些查询保持在最低限度，而不是仅针对一个特定元素进行不同大小的额外查询。

Answer 1

如果您不想使用媒体查询，您可以使用 Javascript/jQuery，但我认为您最好使用媒体查询。

然而，如果您愿意，这是一个 jQuery 解决方案:

在窗口 load 和 resize 事件上放置一个事件处理程序，检查窗口是否等于或等于 500。如果该条件为真，则隐藏#header_numbers 元素，如果为假则显示它。

$(window).on('load resize', function(){
  if($(window).width() <= 500) {
    $('#header_numbers').hide();
  }
  else {
    $('#header_numbers').show();
  }
  
  /* Alternative notation use what you prefer
  $(window).width() <= 500 ? $('#header_numbers').hide() : $('#header_numbers').show();
  */
});

#nav{
  height:50px;
  width:100%;
  position:relative;
  display:flex; 
}
ul{
  display:inline-block;
  height:50px;
  line-height:50px;
  list-style:none;
}
li{
  display:inline-block;
}
#main_menu{
  flex:3;
  text-align:left;
}
#header_numbers{
  flex:4;
  text-align:center;
}
#auth_menu{
  flex:3;
  text-align:right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul id="main_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
<ul id="header_numbers">
  <li>menu item 1</li>
  <li>menu item 2</li>
</ul>
<ul id="auth_menu">
  <li>menu item 1</li>
  <li>menu item 2</li>
  <li>menu item 3</li>
</ul>
</div>