Question

我有一个用作菜单的滑动面板的脚本。它运作良好，但我必须根据屏幕分辨率（移动）应用不同的margin-top。

$(document).ready(function() {
$(".topMenuAction").click( function() {
    if ($("#openCloseIdentifier").is(":hidden")) {
        $("#slider").animate({ 
            marginTop: "-130px"
            }, 500 );
        $("#topMenuImage").html('<img src="img/icono-nav.png"/>');
        $("#openCloseIdentifier").show();
    } else {
        $("#slider").animate({ 
            marginTop: "0px"
            }, 500 );
        $("#topMenuImage").html('<img src="img/icono-cerrar.png"/>');
        $("#openCloseIdentifier").hide();
    }
});

谢谢：）

Answer 1

如果你知道宽度

screenWidth = $（window）.width（）;

switch (screenWidth){
    case 760:
    newMargin = 100;
    break;
    case 420:
    newMargin = 75;
    break
}

如果你想要一个范围

if (screenWidth < 1000 && screenWidth >= 760){
    newMargin = 100;
}
else if (screenWidth < 760 && screenWidth >= 420){
    newMargin = 75;
}
else{
    newMargin = 250
}

Jquery检测屏幕分辨率并应用不同的CSS

1 个答案: