代码之家 › 专栏 › 技术社区 › Paddy Hallihan

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

flexbox css html jquery javascript

Paddy Hallihan · 技术社区 · 7 年前

我有一个在我的导航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)

4 回复 | 直到 5 年前

Mark Baijens 7 年前

如果您不想使用mediaquery,您可以使用Javascript/jQuery,但我认为您最好使用mediaquery。

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

$(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>

××× × ×××× 7 年前

display 属性到 none 无论如何,如果没有媒体查询,就不可能在不同的屏幕大小上隐藏任何内容(对于较小的屏幕大小)。

您可以使用:-

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

Domenik Reitzner 7 年前

您可以一直使用JS,但它的性能不如媒体查询

const maxWidth = 500;

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

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

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

××× × ×××× 7 年前

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

#header_numbers 当浏览器窗口宽度小于等于600px时将隐藏:

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