基於窗口大小添加<br><br>此標籤

Question

需要在li標籤的末尾爲移動版本添加一個分隔標籤，並將其隱藏在桌面上。因此，需要書寫哪些函數以及要選擇的窗口大小？

<li class="border_bottom_none" id="userbenifit"> 
    Benefit 
    <em class="sub_text_heading float_right"> 
     <div id="benefitId"></div> 
    </em> 
</li> 

由於我動態調用一個函數來取消效益，所以它的內容字符大小可能不同。因此對於很長的描述它不能很好地顯示。添加一個突破標籤就可以解決，如果我能找到的窗口的大小和突破，以顯示相同

Answer 1

使用jQuery窗口調整

$(window).resize(function(){ 
if($(window).width() < 640){ // take 640 as your breakpoint 
$("#userbenifit").append("<br/><br/>"); 
}else{ 
// remove br 
} 
}) 

或使用媒體查詢，並添加邊距：

<li class="border_bottom_none added-class" id="userbenifit"> 
    Benefit 
    <em class="sub_text_heading float_right"> 
     <div id="benefitId"></div> 
    </em> 
</li> 

CSS：

@media only screen and (max-width: 640px) { 
.added-class{ 
    margin-bottom : 2em; 
} 
} 

Answer 2

我想這樣的事情可能工作：

$(function(){ 
    if($(window).width() < 600) // change this to your breakpoint 
    { 
     $("#userbenifit").append("<br/><br/>"); 
    } 
})