在使用jQuery的響應式網站中更改HTML響應式網站的結構

Question

這裏有一個設計師堅持做一定的設計，並在那些聲調中說「哦，如果它不能完成......」都知道作爲開發人員說，它可以完成，但你不能這樣做。

我認爲這是不可能的，但在這裏已經閱讀了關於使用jQuery .append所以它可能畢竟。任何建議將非常感謝你。

這是我的代碼：

<section id="technologies"> 
    <ul> 
     <li class="technology" id="ddTechnology1"> 
    <div class="technologyTitle">Title1</div> 
    </li> 
    <li class="technology" id="ddTechnology2"> 
    <div class="technologyTitle">Title2</div> 
    </li> 
    <li class="technology" id="ddTechnology3"> 
    <div class="technologyTitle">Title3</div> 
    </li> 
    <li class="technology" id="ddTechnology4"> 
    <div class="technologyTitle">Title4</div> 
    </li> 
    </ul> 
</section> 
<div id="ddWrapper"> 
    <div id="ddContent" class="targetDiv"> 
     Content Content 
    </div> 
</div> 

該UI被4向左浮動白盒與每個的圖像。下面的div只是一段內容，與之相同。

該網站是一個響應網站，因此，當它被縮減爲平板電腦視圖時，左側浮動的四個li變爲兩排兩個，並且在智能手機視圖中堆疊在另一個之上。

在每個視圖中，該部分下方的div只是調整大小以適應內容並重新排列。

設計師並不開心，因爲他的設計在960px視圖中說，div id =「ddWrapper」低於四個左對齊框;在平板電腦600px視圖中，div必須位於兩行之間，並且在智能手機320px視圖中必須位於第一個li之下。

對我來說這不是一個響應式佈局，但我一直在試圖用jQuery將兔子從帽子里拉出來讓設計師感到高興。

有沒有一種方法使用jQuery的append（）將div id =「ddWrapper」移動到基於當前佈局的HTML中的不同位置？這個問題已經超出了我目前對jQuery的認識，所以我要求任何人都可以提供幫助。

歡呼

坦率

Answer 1

大概要達致這將是包括一些內容不止一次，只是顯示最簡單的方法：無;你不想要的內容。即

<section class="desktop-technologies"> 
    <ul> 
     <li class="technology" id="ddTechnology1"> 
    <div class="technologyTitle">Title1</div> 
    </li> 
    <li class="technology" id="ddTechnology2"> 
    <div class="technologyTitle">Title2</div> 
    </li> 
    <li class="technology" id="ddTechnology3"> 
    <div class="technologyTitle">Title3</div> 
    </li> 
    <li class="technology" id="ddTechnology4"> 
    <div class="technologyTitle">Title4</div> 
    </li> 
    </ul> 
</section> 


<section class="tablet-technologies"> 
    <ul> 
     <li class="technology" id="ddTechnology1"> 
    <div class="technologyTitle">Title1</div> 
    </li> 
    <li class="technology" id="ddTechnology2"> 
    <div class="technologyTitle">Title2</div> 
    </li> 
</ul> 
</section> 


<section class="mobile-technologies"> 
    <ul> 
     <li class="technology" id="ddTechnology1"> 
    <div class="technologyTitle">Title1</div> 
    </li> 
</ul> 
</section> 


<div id="ddWrapper"> 
    <div id="ddContent" class="targetDiv"> 
     Content Content 
    </div> 
</div> 


<section class="tablet-technologies"> 
    <ul> 
    <li class="technology" id="ddTechnology3"> 
    <div class="technologyTitle">Title3</div> 
    </li> 
    <li class="technology" id="ddTechnology4"> 
    <div class="technologyTitle">Title4</div> 
    </li> 
    </ul> 
</section> 


<section class="mobile-technologies"> 
    <ul> 
    <li class="technology" id="ddTechnology2"> 
    <div class="technologyTitle">Title2</div> 
    </li> 
    <li class="technology" id="ddTechnology3"> 
    <div class="technologyTitle">Title3</div> 
    </li> 
    <li class="technology" id="ddTechnology4"> 
    <div class="technologyTitle">Title4</div> 
    </li> 
    </ul> 
</section> 

那麼你可以申請：

.tablet-technologies, .mobile-technologies { 
    display:none; 
} 

與顯示了適當的樣式的相應部分。

這不是最乾淨的解決方案，但它不會爲文件大小增加很多開銷，並且可以在沒有javascript的情況下進行控制。

希望有幫助！