响应式设计:使用媒体查询或jQuery更改标记? [英] Responsive design: Changing markup with media queries or jQuery?

问题描述

使用媒体查询或jQuery，我想更改HTML标记.我不确定什么是最好的选择.

With either media queries or jQuery, I'd like to change the HTML markup. I'm not sure what is the best option.

我当前的HTML标记:

My current HTML markup:

<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>转换为4个<li>，如下所示:

For mobile portrait orientation, I'd like to keep a single <div> within a <li> so that the original 2 <li>s are converted to 4 <li>s as below:

<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>

我该怎么做?我不认为仅靠媒体查询不能解决这个问题.解决此问题的有效方法是什么?

How do I do this? I don't think media queries alone cannot handle this. What's the efficient way to resolve this?

推荐答案

如果您习惯使用仅CSS 的概念，是否考虑过使用通过媒体查询控制的两个独立元素?我不确定您选择的脚本对速度/加载时间有何影响，但这从技术角度来说应该可以解决.

If you are married to the concept of CSS-only, have you considered using two separate elements which are controlled via media queries? I'm not sure what the speed/load-time implications are with the script you have chosen, but this should work from a technical standpoint.

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库).此策略可能需要进行一些速度/负载测试才能找到最佳解决方案.您提供的有关所用库的信息越多，滑块所利用的脚本越多，这些答案就越具体.

You may be able to get better performance from jQuery if you're already using a slider (assuming you're already including the jQuery library). This tactic might warrant some speed/load testing to find the optimal solution. The more you can provide about the libraries you're using, and the script you're leveraging for the slider the more specific these answers can be.

这篇关于响应式设计:使用媒体查询或jQuery更改标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！