響應式設計：使用媒體查詢或 jQuery 更改標記？

Question

使用媒體查詢或 jQuery，我想更改 HTML 標記。 我不確定什么是最好的選擇。

我當前的 HTML 標記：

<ul>
  <li>
    <div class="item-1">.....</div>
    <div class="item-2">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
    <div class="item-2">.....</div>
  </li>
</ul>

對於移動縱向，我想在<li>保留一個<div>以便將原始 2 <li> s轉換為 4 <li> s，如下所示：

<ul>
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
</ul>

我該怎么做呢？ 我不認為媒體查詢本身無法處理這個問題。 解決這個問題的有效方法是什么？

Answer 1

如果您接受CSS-only的概念，您是否考慮過使用兩個通過媒體查詢控制的獨立元素？ 我不確定您選擇的腳本對速度/加載時間的影響是什么，但這從技術角度來看應該是可行的。

HTML

<ul id="fullscreen">
  <li>
    <div class="item-1">.....</div>
    <div class="item-2">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
    <div class="item-2">.....</div>
  </li>
</ul>

<ul id="mobileonly">
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
  <li>
    <div class="item-1">.....</div>
  </li>
</ul>

CSS

#fullscreen { display: block; }
#mobileonly { display: none; }

@media (max-width: 768px) {
    #fullscreen { display: none; }
    #mobileonly { display: block; }
}

如果您已經在使用滑塊（假設您已經包含 jQuery 庫），那么您可能能夠從 jQuery 獲得更好的性能。 這種策略可能需要進行一些速度/負載測試以找到最佳解決方案。 您提供的關於您正在使用的庫以及您為滑塊利用的腳本越多，這些答案就越具體。