Question

我正在尝试检查视口大小，然后根据视口大小是否介于768px - 992px之间，使用if和else语句应用不同的样式。但是，到目前为止我所做的并不起作用。

这是我的代码......

$(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');
            });
        }
    });
});

谢谢！

Answer 1

为什么不使用css？像：

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

    }
 }

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

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

    }
 }

Answer 2

试试这个。

在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.

Answer 3

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

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

Answer 4

以下是您仍然希望将Jquery用于此目的Jsfiddle

<强> JS

$( 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>

这里有两个条件，第一个是加载页面的时候，第二个条件是浏览器大小的变化。你可以看到这个方法的演示

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

4 个答案: