Question

我想知道哪种方法最适合自适应网站。该网站将使用Zurb Foundation和jQuery作为框架。

我知道如何实现响应式导航有两种方法。一种是简单地创建两种导航，一种用于大屏幕，另一种用于较小的屏幕（或移动电话）。它将使用媒体查询根据屏幕尺寸显示和隐藏元素。

我正在考虑的另一种方法，而不是在DOM中创建两种导航，只使用单个源DOM元素，并随着屏幕大小的变化操纵它。我打算使用jQuery的resize()。当屏幕调整到较小的屏幕时，所有这些列表项都将放在一个列表中，随着屏幕变大，它将扩展到不同的列表（ul s）。

我正在考虑的事情，我想如果我做两种DOM元素，那就不实用，可能会使网站臃肿。同时如果我将使用javascript来操纵DOM位置，那可能不是一次顺畅的体验（我仍然不确定）。

我想知道你的想法。

我的DOM元素看起来与此类似。

<header>

  <ul id="social-links" class="social-links">
    <li>Facebook</li>
    <li>Twitter</li>
  </ul>

  <ul id="profile">

    <li><span>Hello</span><span>John</span>
      <ul>
        <li>Profile</li>
        <li>Edit Settings</li>
        <li>Log Out</li>
      </ul>                
    </li>

  </ul>

  <nav>

    <ul>
      <li>Home</li>
      <li>Product</li>
      <li>Services</li>
      <li>Contact</li>
    </ul>

  </nav>

</header>


<ul class="mobile-alt-nav">

    <li class="greet"><span>Hello</span><span>John</span>
    <li>Profile</li>
    <li>Edit Settings</li>
    <li>Log Out</li>
    </li>

    <li>Home</li>
    <li>Product</li>
    <li>Services</li>
    <li>Contact</li>

    <li>Facebook</li>
    <li>Twitter</li>

</ul>

Answer 1

你应该使用CSS。

根据特定的css媒体查询创建课程

more info on media queries here

Answer 2

你的想法完全正确。应尽可能避免复制DOM元素。

值得采用一种经过深思熟虑的方法来构建标记，以便在可能的情况下在断点样式之间轻松转换。

但是值得注意的是，在一些实例中，复制内容以避免CSS膨胀或删除Javascript要求可能是有益的。

在您的情况下，由于您正在考虑使用Javascript以避免重复，因此如果内容大小与您所描述的内容大致大致相同，我建议您实际上复制标记。使用Javascript操作DOM节点远比使用CSS隐藏/显示块更不具备性能。

添加Javascript以这种方式操纵DOM会产生不必要的复杂性。如果您选择不在此处使用Javascript并复制内容，则您的代码在浏览器中将更具可读性和可靠性。

SEO影响力

搜索引擎只会惩罚在同一页面上出现多次的内容，如果它似乎是垃圾内容或尝试关键字填充。但是，只需以您建议的方式复制DOM元素就不会产生影响。

我希望这会有所帮助。

隐藏DOM元素与操纵响应网站的DOM元素？

2 个答案: