根據頁面寬度顯示我的頁面上的元素

我想根據頁面的寬度調整我的視圖上顯示的元素。假設頁面寬度大於800像素，那麼我想顯示div A + div B（請參閱下圖）。根據頁面寬度顯示我的頁面上的元素

enter image description here

但是，如果頁面寬度小於或大於600像素相等，那麼我想只顯示DIV A.

enter image description here

它必須是動態的。所以，如果用戶調整窗口大小，div B必須顯示或隱藏。

jQuery解決方案？

謝謝。

來源

2011-11-20 Bronzato

如果什麼頁面是700像素寬？ – Eric

如果頁面寬度爲700像素，則只顯示div A. div B必須從800px開始顯示。 – Bronzato

所以你的問題[「如何用jQuery獲得文檔或瀏覽器的寬度」]（http://api.jquery.com/width/）或[「如何用jQuery隱藏div」]（http： //www.google.com.au/search?q=how+to+hide+a+div+with+jquery）？ – nnnnnn

在CSS中使用media queries！

@media screen and (max-width: 799px) { 
    #b { 
     display:none; 
    } 
}

jsfiddle

來源

2011-11-20 11:07:27 Eric

非常感謝:)我會發布另一個更高級的技術問題。 – Bronzato

有趣，但不是很好的支持。 http://caniuse.com/css-mediaqueries（IE8仍然被許多人視爲「當前」瀏覽器） –

@Kae - 在我的工作場所，我被IE7卡住了 - 不允許使用任何其他瀏覽器。（在家我使用XP，所以我不能去IE9，但在家裏我寧願使用Chrome和FF。） – nnnnnn

假設你想非JavaScript用戶看到A和B：

$(document).ready(function() { 

    var $divB = $('....'); // Define div B here using selectors 

    $(window).resize(function() { 
     if ($(window).width() < 800) { 
      $divB.hide(); 
     } 
     else { 
      $divB.show(); 
     } 
    }); 
});

編輯：哎呦，沒看到，你希望它是動態的。改變。

這樣做在CSS中是Eric所說的比jQuery更好的選擇。

來源

2011-11-20 11:06:33

$(function(){ 
    var $body=$(document.body), width=$body.outerWidth(), c='large'; 
    if (width<600) { 
    c='small'; 
    } 
    else if (width<800) { 
    c='medium'; 
    } 
    $body.addClass(c); 
});

然後用body.small，body.medium和body.large在你的CSS提供不同的佈局。

來源

2011-11-20 11:07:21

根據頁面寬度顯示我的頁面上的元素

回答

相關問題