根据窗口宽度应用不同的样式，jquery

我想检查视口大小，然后根据视口大小是否在768px-992px之间，使用if和else语句应用不同的样式。但是，到目前为止我所得到的并不奏效。根据窗口宽度应用不同的样式，jquery

这里是我的代码...

$(document).ready(function() { 
    var windowSize = $(window).width(); 
    function checkwindowSize() { 
     if(windowSize > 768 && windowSize < 992) { 
      $('#show-menu').css('visibility', 'hidden', function() { 
       $('#slide-menu-container').css('visibility', 'visible'); 
      }); 
     } 
     else { 
      $('#show-menu').css('visibility', 'visible', function() { 
       $('#slide-menu-container').css('visibility', 'hidden'); 
      }); 
     } 
    }); 
});

谢谢！

来源

2014-06-13 user3541921

外貌月1日是一个像[媒体查询]的工作（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）。 –

我不知道为什么我没有想到使用媒体查询！只是出于兴趣，有什么可以看到我的代码有问题吗？谢谢！ – user3541921

如果我使用秀，我能做到这一点... – user3541921

FrédéricHamidi说，CSS媒体查询是最好的方法。

要回答你的问题，在你的代码示例中，你永远不会调用checkwindowSize（）函数。此外，为了改善您的代码，您可以在每次使用 “调整大小”事件重新调整浏览器时调用函数。 http://api.jquery.com/resize/

来源

2014-06-13 13:21:54

好的，非常感谢你！ – user3541921

为什么不使用css？像：

@media (min-width: 768px) and (max-width: 992px) { 
    #showmenu{ 

    } 
} 

@media (min-width: 993px) { 
    #showmenu{ 

    } 
} 
    @media (max-width: 767px) { 
    #showmenu{ 

    } 
}

来源

2014-06-13 13:24:06

试试这个。

在checkwindowSize函数中定义您的windowSize变量。

@media查询优先于javascript。

function checkwindowSize() { 
    var windowSize = $(window).width(); 
    if(windowSize > 768 && windowSize < 992) { 
     $('#show-menu').css('visibility', 'hidden', function() { 
      $('#slide-menu-container').css('visibility', 'visible'); 
     }); 
    } 
    else { 
     $('#show-menu').css('visibility', 'visible', function() { 
      $('#slide-menu-container').css('visibility', 'hidden'); 
     }); 
    } 
} 

checkwindowSize(); 

$(window).resize(function(){checkwindowSize()});

Fiddle Demo.

来源

2014-06-13 13:28:55

这里是如果你仍然想使用jQuery为此目的Jsfiddle

$(document).ready(function() { 

    if($(window).width() <= 500) 
    { 
     $(".smallerSize").css('display','block'); 
    } 
    else 
    { 
     $(".biggerSize").css('display','block'); 
    } 
}); 

$(window).resize(function() { 
    if ($(window).width() <= 500) 
    { 
     $(".biggerSize").css('display','none'); 
     $(".smallerSize").css('display','block'); 
    } 
    else 
    { 
     $(".smallerSize").css('display','none'); 
     $(".biggerSize").css('display','block'); 
    } 

});

CSS

.smallerSize 
{ 
    display:none; 
} 

.biggerSize 
{ 
    display:none; 
}

HTML

<div class="smallerSize"> 
    <span>Small Size</span> 
</div> 

<div class="biggerSize"> 
    <span>Bigger Size</span> 
</div>

在这里，你有2种条件下，当页面加载和第2条件是当浏览器尺寸为changing.You可以看到演示了这种方法

来源

2014-06-13 13:30:39

根据窗口宽度应用不同的样式，jquery

回答

相关问题