Question

这是一个奇怪的，我不确定是否可以做到。

我想删除一个div，然后根据屏幕尺寸/设备类型将其放回去。以响应式网站为例，右侧列中包含广告，当屏幕尺寸达到移动尺寸时，此列会消失。

广告代码代码已硬编码到页面上，因此在移动查看时，广告代码仍处于触发状态。使用媒体查询不会做我不想的轨道，因为它只会隐藏＆＃34;元素。

我需要在网站达到某个断点时将其删除，然后放回...我已经做了一些研究，看起来附加类可以工作了吗？

这是我的模拟示例。 - http://mrpbennett.com/addRemove

     <div class="adslot-container">
          <img class="mpu"src="img/mpu1.png">
      </div>

      <div class="adslot-container">
          <img class="mpu"src="img/mpu2.png">
      </div>

以上是代码/容器＆＃34; adslot-container＆＃34;将是我想从代码中删除并根据屏幕大小放回。不要隐藏...因此容器内的广告代码不会在加载时触发。

希望让事情更清楚一点？

Answer 1

所以我猜你不希望加载或执行的内容低于某个分辨率，使隐藏/显示不可接受。

这样的事情可以为动态添加内容提供JavaScript解决方案：

jQuery(function($){
  var lastWidth = null;
  $(window).bind('resize', function(e){
      if((lastWidth == null || lastWidth < 500) && window.innerWidth >= 500)
      {
          $('body').append('<div class="target"></div>');
      }
      else if((lastWidth == null || lastWidth >= 500) && window.innerWidth < 500)
      {
          $('.target').remove();
      }

      lastWidth = window.innerWidth;
  }).trigger('resize');
});

使用窗口调整大小事件基本上模拟媒体查询。

为响应式网站添加div

1 个答案: