根據窗口寬度應用不同的樣式，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

回答

相關問題