CSS/JS/Jquery - Flex items for responsive screen sizes

问题

I have a site with 3 items in my navigation which I want to remain on one line.

The first is the main menu which has the main site links and should be to the left of the nav bar.
The second is contact information which should be centered in the nav bar.
The third is the auth menu, which has sign in/account links etc, which should be to the right of the nav bar.

#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>

If the screen gets too small the different menus will drop to another line but what I want to happen is hide the one in the center with the contact info and only have the two menus to the right and left so everything remains on one line.

I'm not sure if there is a way to achieve this with just CSS unless I do a query like @media only screen and (max-width: 500px) but I'd rather just keep these queries to a minimum for mobile/desktop rather than having additional queries at different sizes just for one specific element.

回答1:

If you don't want to use media query's you could use Javascript/jQuery but I think you are better off with media queries for this.

However this is a jQuery solution if you prefer that:

Put a event handler on the window load and resize events that check if the window with is equal or the same to 500. If that condition is true then hide the #header_numbers element, if it false show it.

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

回答2:

You have to set the display property to none anyways, otherwise, it is not possible without media query to hide anything on different screen size (In your case to smaller screen size).

You can use : -

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

回答3:

You are describing the functionality of CSS Media Queries, but say that you don't want to use them :)

You could always use JS, but it is less performat than Media queries

const maxWidth = 500;

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

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

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

回答4:

As I know media-query is only way to apply style according screen size in css...

For Example #header_numbers will hide when the browser window is 600px wide or less:

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

来源：https://stackoverflow.com/questions/52200052/css-js-jquery-flex-items-for-responsive-screen-sizes

标签

javascript

jquery

html

css

flexbox