[英]What is the jQuery equivalent of @media screen and (max-width:1000px) and (min-width:747px)
我想包装这些元素
<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>" );
您始终可以使用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
}
您可以按照以下说明进行操作,然后就完成了...。
if (window.matchMedia('(max-width: 1000px) and (min-width:747px)').matches) {
//...
} else {
//...
}
这个Jquery Media Query对我有用。 希望这也对您有用
码:
if (Modernizr.mq('screen and (min-width: 747px) and (max-width:1000px) ')) {
/*Your Code Here*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.