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>

モバイルの縦向きの場合、以下のように元の 2秒が 4 秒に変換されるように、<div>内に1 つを保持したいと思います。<li><li><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>

どうすればいいですか？メディアクエリだけではこれを処理できないとは思いません。これを解決する効率的な方法は何ですか？

4

1 に答える 1

1

CSS-onlyの概念に固執している場合、メディア クエリによって制御される 2 つの別個の要素を使用することを検討したことがありますか? 選択したスクリプトが速度/読み込み時間にどのような影響を与えるかはわかりませんが、技術的な観点からはこれでうまくいくはずです。

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 に答える