什么是jQuery相当于@media屏幕和（max-width：1000px）和（min-width：747px）

Question

I would like to wrap these elements

<div class="nav_menu"></div>
<div clss="logo_wrapper"></div>

on screen sizes between 1000px and 747px. So i would like it to become this:

<div class="menu-logo-wrapper">
    <div class="nav_menu"></div>
    <div clss="logo_wrapper"></div>
</div>

I was a bunch of questions about doing just min or just max width on jQuery, but I have no idea how to combine the two.

Just to be sure I'm doing the other part right, the wrap jQuery I use is:

$('.mobile_menu_button, .logo_wrapper').wrapAll( "<div class='menu-logo-wrapper'></div>" );

Answer 1

You can always use windows width to add and remove classes or dynamically change the UI inside conditions. Here is the example code.

if($(window).width() < 1000 && $(windows).width > 747)
{
  // write something here 
  $( "#idOfYourClass" ).addClass( "your new class" );

}
elseif($(window).width() < 747)
{
  //do something else
}
else { 
 //  $( "#idOfYourClass" ).removeClass( "your new class" ); or maybe something else
}

Answer 2

You can do it by following, and you're done....

    if (window.matchMedia('(max-width: 1000px) and (min-width:747px)').matches) {
        //...
    } else {
        //...
    }

Answer 3

This Jquery Media Query works for me. Hope this works for you as well

Code:

  if (Modernizr.mq('screen and (min-width: 747px) and (max-width:1000px) ')) {
           /*Your Code Here*/
        }