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>

对于移动纵向导视，我希望在<div>内保留一个<li>，以便将原始的2 <li>转换为4 <li>下面：

<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 的概念结合，您是否考虑使用通过媒体查询控制的两个单独元素？我不确定您选择的脚本对速度/加载时间的影响是什么，但这应该从技术角度来看。

<强> 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获得更好的性能。这种策略可能需要一些速度/负载测试才能找到最佳解决方案。您可以提供的关于您正在使用的库的更多信息，以及您为滑块利用的脚本，这些答案可以更具体。

响应式设计：使用媒体查询或jQuery更改标记？

1 个答案: