如果屏幕小於一定寬度，則隱藏div

如果用戶屏幕爲< 1024px，我想隱藏浮動div，因爲它會覆蓋我的博客內容區域。我在網上發現了這個jQuery，但我不知道如何使用它。如果屏幕小於一定寬度，則隱藏div

$(document).ready(function() { 

if ((screen.width>1024)) { 
    // if screen size is 1025px wide or larger 
    $(".yourClass").css('display', 'none'); // you can also use $(".yourClass").hide(); 
} 
elseif ((screen.width<=1024)) { 
    // if screen size width is less than 1024px 
    $(".yourClass").css('display', 'block'); // here you can also use show(); 
} 
});

如果我的浮動div類名稱是sharecontent，我應該像下面那樣替換上面的腳本嗎？如果是，它不起作用。

$(document).ready(function() { 

if ((screen.width>1024)) { 
    // if screen size is 1025px wide or larger 
    $(".sharecontent").css('display', 'none'); // you can also use $(".yourClass").hide(); 
} 
elseif ((screen.width<=1024)) { 
    // if screen size width is less than 1024px 
    $(".sharecontent").css('display', 'block'); // here you can also use show(); 
} 
});

我也試過更換與window.width的screen.width但仍然沒有成功:(

來源

2010-11-28 dzul

請勿使用Javascript修復非Javascript問題。最好修復CSS – Gareth 2010-11-28 09:37:22

而且無論如何，爲什麼它關係我的屏幕尺寸是多少？我可能沒有我的瀏覽器窗口全屏 – Gareth 2010-11-28 09:38:54

Gareth提出了一個重要的觀點，你應該看看窗口的寬度，而不是真正的屏幕。 – Orbling 2010-11-28 12:16:11

使用media queries你的CSS代碼將是：

@media screen and (max-width: 1024px) { 
    .yourClass { 
     display: none !important; 
    } 
}

來源

2010-11-28 08:43:00 Eric

是你的邏輯不圓在這個例子中錯誤的方式是，當屏幕大於1024時，它會隱藏起來。反過來，將none設置爲block，反之亦然。

來源

2010-11-28 08:49:15 Orbling

你的代碼的問題似乎是elseif-聲明應該是else if（注意空間）。

我重寫和simplyfied代碼這樣：

$(document).ready(function() { 

    if (screen.width < 1024) { 
     $(".yourClass").hide(); 
    } 
    else { 

     $(".yourClass").show(); 
    } 

});

來源

2010-11-28 08:54:48 peterthegreat

我有幾乎相同的情況下爲你的;如果屏幕寬度小於我指定的寬度，它應該隱藏div。這是我用過的jQuery代碼，適合我。

$(window).resize(function() { 

    if ($(this).width() < 1024) { 

    $('.divIWantedToHide').hide(); 

    } else { 

    $('.divIWantedToHide').show(); 

    } 

});

來源

2013-11-06 23:09:05 jmespinosa

我遇到的問題是我的CSS媒體查詢和我的IF語句在Jquery的衝突。它們都被設置爲700px，但有人會認爲它會在另一個之前達到700px。

爲了解決這個問題，我創建我的HTML的頂部的空div右（外我主容器）

<div id="max-width"></div>

在CSS中我設置的div顯示無

#max-width { 
     display: none; 
    }

在我的JS創建了一個函數

var hasSwitched = function() { 
    var maxWidth = parseInt($('#max-width').css('max-width'), 10); 
    return !isNaN(maxWidth); 
};

所以在我的IF語句中而不是說if（hasSwitched < 700）執行下面的代碼，我做了以下

if (!hasSwitched()) { Your code 

} 

else{ your code 

}

通過這樣做CSS告訴jQuery的，當它的命中700像素。所以css和jquery都是同步的......而不是有幾個像素差異。請試試看，一定不會讓人失望。

爲了得到這個相同的邏輯IE8的工作我使用了Respond.js插件（這也肯定是作品）它可以讓你使用IE8的媒體查詢。只有不支持的東西是視口寬度和視口高度...因此我試着讓我的CSS和JS一起工作。希望這可以幫助你們

來源

2014-02-14 15:33:19

如果屏幕小於一定寬度，則隱藏div

回答

相關問題