1

使用媒体查询或 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>在 a中保留一个<li>，以便将原来的 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>

我该怎么做呢？我不认为仅媒体查询无法处理这个问题。解决这个问题的有效方法是什么？

4

1 回答 1

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

于 2013-04-29T14:49:32.640 回答