Question

我有一个网站的导航中有3个项目，我想保留在一行上。

第一个是主菜单，具有主站点链接，应在导航栏的左侧。
第二个是联系方式应该放在导航栏中。
第三个是auth菜单，其中具有登录/帐户链接等，应位于导航栏。

#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解决方案：

在窗口.SD和?datatable.optimize事件上放置事件处理程序，以检查窗口是否等于或等于500。如果该条件为true，则隐藏load元素，如果显示为假，则显示为

。

resize

#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();
  */
});

Answer 2

据我所知，媒体查询是根据 css ...

中的屏幕尺寸应用样式的唯一方法

例如，#header_numbers将在浏览器窗口的宽度小于或等于600像素时隐藏：

@media only screen and (max-width: 600px) {
    #header_numbers{
        display: none;
    }
}

Answer 3

无论如何，您都必须将display属性设置为none，否则，如果没有媒体查询就无法隐藏不同屏幕尺寸的任何内容（在您的情况下为较小的屏幕尺寸）。

您可以使用：-

@media only screen and  (max-width: 540px) {
  #header_numbers{
    display: none;
  }
}

Answer 4

您描述的是CSS Media Queries的功能，但是您不想使用它们：）

您始终可以使用JS，但是它的性能比Media查询差

const maxWidth = 500;

document.addEventListener("DOMContentLoaded", () => {
    checkWidth();
});

window.addEventListener('resize', () => {
    checkWidth();
});

function checkWidth() {
    if(window.innerWidth < maxWidth) {
         // ...do somthing with the element
    }
}

CSS / JS / Jquery-用于响应屏幕尺寸的Flex项目

4 个答案: