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检查窗口 with 是否等于或等于 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>

Answer 2

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

您可以使用 ： -

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

Answer 3

您正在描述 CSS 媒体查询的功能，但说您不想使用它们:)

您始终可以使用 JS，但它的性能低于媒体查询

const maxWidth = 500;
document.addEventListener("DOMContentLoaded", () => {
checkWidth();
});
window.addEventListener('resize', () => {
checkWidth();
});
function checkWidth() {
if(window.innerWidth < maxWidth) {
// ...do somthing with the element
}
}

Answer 4

据我所知，媒体查询是根据css 中的屏幕尺寸应用样式的唯一方法......

例如，当浏览器窗口宽度为 600px 或更小时，#header_numbers将隐藏：

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