根据页面宽度在页面上显示元素

Question

我想调整视图中显示的元素，具体取决于页面的宽度。假设页面宽度大于800像素，那么我想显示div A + div B（见下图）。

但如果页面宽度小于或等于600像素，那么我只想显示div A。

它必须是动态的。因此，如果用户调整窗口大小，则必须显示或隐藏div B.

jQuery解决方案？

感谢。

Answer 1

使用media queries在CSS中执行此操作！

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

jsfiddle

Answer 2

假设您希望非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更好的选择。

Answer 3

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

然后在CSS中使用body.small，body.medium和body.large来提供不同的布局。