爲響應網站添加div

這是一個奇怪的問題，我不確定它是否可以完成。爲響應網站添加div

我想刪除一個div，然後把它放回去，具體取決於屏幕尺寸/設備類型。以右側列中的廣告爲例，採用響應式網站時，當屏幕尺寸達到移動設備尺寸時，此列會消失。

廣告代碼被硬編碼到頁面上，因此在移動視圖中廣告代碼仍在觸發。使用媒體查詢不會做我不認爲的軌道，因爲它只是「隱藏」元素。

我需要它被刪除，當該網站達到一定的中斷點，然後得到放棄...我做了一些研究，似乎該附加類可以工作？

這是我的模擬示例。 - 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>

以上是代碼/容器「廣告位的容器」會是什麼，我想從代碼中刪除並放回取決於屏幕尺寸。不隱藏...因此容器內的廣告代碼在加載時不會觸發。

希望讓事情更清楚一點？

來源

2015-09-29 mrpbennett

請在問題中發佈足夠的代碼以便對具體問題進行復制 – Popnoodles

添加一個類只能同樣做媒體查詢會 - 顯示或隱藏 – Popnoodles

如果沒有看到代碼，我首先想到的是隻需要將'display：none;'應用於要隱藏div的斷點。 – amklose

所以我想你不希望加載或執行的內容低於某個決議隱藏/顯示不可接受。

像這樣的東西可以動態地添加內容提供了一個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'); 
});

本質上模擬使用窗口resize事件媒體查詢。

來源

2015-09-29 16:38:37 ryachza

我剛剛添加了一個模擬頁面和一個片段，希望是有道理的。 – mrpbennett

@pbennettuk是的，我認爲這是有道理的。我不清楚的是你將如何「發送它」，因爲你不能將它作爲HTML主體的一部分發送，而不會被執行。所以你必須把它作爲一個字符串嵌入到某個地方並追加它，或者可能會異步地請求內容。我發佈的解決方案應該可以動態地添加內容，但我不確定您打算如何實際獲取內容。 – ryachza

將內容投放到一段腳本中，購買廣告客戶。所以內容的服務在這裏不是一個擔心。它刪除了代碼並確保它不會觸發印象。我會給你的snipper一試，看看會發生什麼。謝謝。 – mrpbennett

爲響應網站添加div

回答

相關問題