根据页面宽度显示我的页面上的元素

我想根据页面的宽度调整我的视图上显示的元素。假设页面宽度大于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

根据页面宽度显示我的页面上的元素

回答

相关问题