如何根据屏幕大小使用 jQuery 隐藏 div [英] How to hide a div wih jQuery dependant on screen size

问题描述

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

I am writing a responsive WordPress theme and am in a situation where I want to hide a div based on the screen resolution of the viewer.

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

I have a 468px by 60px advertising banner from BuySellAds in a div and I would like to hide it from viewers that view the site on a smartphone or tablet.

我尝试使用 CSS3 媒体查询来实现这一点，但没有奏效.

I tried to achieve this using CSS3 media queries however it did not work.

这可以使用 jQuery 实现吗?如果是这样，将不胜感激任何为我指明正确方向的代码.

Can this be achieved using jQuery? If so any code to point me in the right direction would be greatly appreciated.

谢谢

推荐答案

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

You can take values from $(window) selector. For getting current value; use resize() method:

这里正在使用 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:

You can do this with pure css3 also, using this css:

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

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

And i suggest to inspect these answer's, if you want to go further with jQuery scroll values: Setting CSS value limits of the window scrolling animation and How to build simple sticky navigation at the page bottum?

这篇关于如何根据屏幕大小使用 jQuery 隐藏 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！