2

我正在编写一个响应式 WordPress 主题，并且我想根据查看器的屏幕分辨率隐藏一个 div。

我在一个 div 中有一个来自 BuySellAds 的 468 像素 x 60 像素的广告横幅，我想对在智能手机或平板电脑上查看该网站的观众隐藏它。

我尝试使用 CSS3 媒体查询来实现这一点，但它不起作用。

这可以使用jQuery来实现吗？如果是这样的话，任何能指引我正确方向的代码将不胜感激。

谢谢

4

3 回答 3

5

您可以从$(window)选择器中获取值。用于获取当前值；使用resize()方法：

这是工作的jsFiddle。

var range = 200;
//for getting begining values
var windowW = $(window).height();
var windowH = $(window).width();
console.log(windowW+'X'+windowH);

//for getting current values
$(window).resize(function() {
   var windowW = $(this).height();
   var windowH = $(this).width();
   console.log(windowW+'X'+windowH);

   if( windowW < range ) {
      $('.ele').hide();
   }else{
      $('.ele').show();
   }
});​

编辑：您也可以使用纯 css3 执行此操作，使用此 css：

@media only screen and (min-width: 767px) { .ele { display:none; } }

如果您想进一步使用jQuery 滚动值，我建议检查这些答案： 设置窗口滚动动画的 CSS 值限制 和如何在页面底部构建简单的粘性导航？

于 2012-08-26T00:17:31.157 回答
0 
$(window).resize(function(){
  if($(window).width() < 500){
    $('#obj_id').hide();
  }else{
    if($('#obj_id').is(':hidden'){
      $('#obj_id').show();
    }
  }
});
$(window).trigger('resize'); //so the resize function runs on-load
于 2012-08-26T00:18:13.937 回答
0

和：

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

你可以得到高度大小......（http://api.jquery.com/height/）并且......

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

宽度大小... (http://api.jquery.com/width/)

然后.. 用一个简单的 IF.. 你可以做你想做的;-)

if($(window).width()<1024)$('#divID').hide();
于 2012-08-26T00:20:36.753 回答