Javascript CSS/JS/Jquery-用于响应屏幕大小的灵活项目

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

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

#导航{
高度：50px；
宽度：100%；
位置：相对位置；
显示器：flex；
}
保险商实验室{
显示：内联块；
高度：50px；
线高：50px；
列表样式：无；
}
李{
显示：内联块；
}
#主菜单{
弹性：3；
文本对齐：左对齐；
}
#标题编号{
弹性：4；
文本对齐：居中；
}
#授权菜单{
弹性：3；
文本对齐：右对齐；
}

菜单项1
菜单项2
菜单项3


菜单项1
菜单项2


菜单项1
菜单项2
菜单项3

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

例如，当浏览器窗口的宽度小于等于600px时，

#标题编号

将隐藏：

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

---

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

例如，当浏览器窗口的宽度小于等于600px时，

#标题编号

将隐藏：

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

---

您必须将

display

属性设置为

none

，否则，在没有媒体查询的情况下，无法在不同的屏幕大小上隐藏任何内容（在您的情况下，隐藏为更小的屏幕大小）

您可以使用：-

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

---

您必须将

display

属性设置为

none

，否则，在没有媒体查询的情况下，无法在不同的屏幕大小上隐藏任何内容（在您的情况下，隐藏为更小的屏幕大小）

您可以使用：-

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

---

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

但是，如果您愿意，这是一个jQuery解决方案：

将事件处理程序放置在窗口

load

和

resize

事件上，以检查窗口的大小是否等于或等于500。如果该条件为真，则隐藏

#header_numbers

元素，如果为假则显示它

$（窗口）.on（'load resize'，function（））{
if（$（window）.width（）如果您不想使用媒体查询，您可以使用Javascript/jQuery，但我认为您最好使用媒体查询

但是，如果您愿意，这是一个jQuery解决方案：

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


$（窗口）.on（'load resize'，function（））{
如果（$（window）.width（）您正在描述CSS媒体查询的功能，但是说您不想使用它们：）

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

const maxWidth = 500;

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

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

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

const maxWidth=500；
document.addEventListener（“DOMContentLoaded”，（）=>{
检查宽度（）；
});
window.addEventListener（'resize'，（）=>{
检查宽度（）；
});
函数checkWidth（）{
if（window.innerWidth
您正在描述CSS媒体查询的功能，但表示不想使用它们：）

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

const maxWidth = 500;

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

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

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

const maxWidth=500；
document.addEventListener（“DOMContentLoaded”，（）=>{
检查宽度（）；
});
window.addEventListener（'resize'，（）=>{
检查宽度（）；
});
函数checkWidth（）{
if（window.innerWidth