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

Question

我想包装这些元素

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

屏幕尺寸

在1000像素到747像素之间。所以我希望它成为这个：

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

我对在jQuery上执行最小宽度或最大宽度有很多疑问，但是我不知道如何将两者结合起来。

只需确保我做的另一部分正确，我使用的自动换行jQuery是：

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

Answer 1

您始终可以使用Windows width来添加和删除类或动态更改UI内部条件。这是示例代码。

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

您可以按照以下说明进行操作，然后就完成了。...

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

Answer 3

此Jquery Media Query对我有用。希望这也对您有用

代码：

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