什么是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*/
        }