如何根据屏幕大小隐藏与jQuery相关的div

Question

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

我在一个div中有来自BuySellAds的468px乘60px广告横幅,我想将其隐藏在智能手机或平板电脑上观看该网站的观众中.

我试图使用CSS3媒体查询实现这一点,但它不起作用.

这可以使用jQuery实现吗？如果是这样,任何指向正确方向的代码将非常感激.

谢谢

Answer 1

您可以从$(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();
   }
});?

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

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

我建议检查这些答案,如果你想进一步研究jQuery滚动值: 设置窗口滚动动画的CSS值限制 以及如何在页面底部构建简单的粘性导航？