我应该如何处理响应式设计中的 DOM 更改？ [复制]

Question

我正在编写一个响应式网站（假设是一个断点以使事情变得简单），它最终会看起来像这样：

宽屏：

=================
     HEADER 
=================

      HERO

=================
  NAV  | SEARCH
-----------------

窄屏：

=================
     HEADER 
=================
  NAV  | SEARCH
-----------------

      HERO

=================

如您所见，这不仅仅涉及 CSS 和媒体查询。正在进行一些 DOM 重组。显然这是一个简化的示例，根据视口大小提供完全不同的 HTML 文件可能是有意义的。

但是...如果宽屏和窄屏版本之间的代码 90% 相同怎么办？当 DOM 树中只有几个元素被移动时，复制所有代码肯定不是一个好主意。

我现在的做法是：

<header>...</header>
<section class="hero">...</section>
<section class="controls">
  <nav>...</nav>
  <form class="search">...</form>
</section>

<script>
  if(viewport.width < 768){
    $('.controls').insertAfter('header');
  }
</script>

然而，这个解决方案会用 jQuery 弄乱我的文件，在页面元素全部加载后重写它们。这对性能也不是太好。

您对更好的前进方式有什么想法吗？

---

编辑：为了响应重复的标志，是的 display:table 解决方案适用于这个特定的例子。所以它在技术上是重复的。但是我在这里接受的 flexbox 解决方案是一个更强大、更适合该任务的工具。

Answer 1

您可以使用媒体查询，并使用 CSS 灵活框模型及其排序规则。像这样的东西可以解决问题（包括浏览器前缀）：

#container {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
    }

#div-1 {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

#div-2 {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1
}

希望这会有所帮助。

Answer 2

这是一个使用 CSS 的选项：http://cdpn.io/Gqfad

本质上，使用 CSS 表和媒体查询在视口变化时交换表值。

CSS

.header{ 
  display:table-header-group;
}
.nsWrap{
   display: table-footer-group;
}
.nav{
  width:50%;
  float: left;

}
.search{
  width:50%;
  float: right;
}
.hero{
   display: table-row-group;
}

 .tableWrap{
   display:table; 
   width:100%;
 }


@media (max-width: 767px){
  .nsWrap{
      display: table-row-group;
  }

}    

HTML

<div class="tableWrap">
  <div class="header">HEADER</div>

  <div class="nsWrap">
    <div class="nav">NAV</div>
    <div class="search">SEARCH</div>
  </div>

 <div class="hero">HERO </div> 

</div>  

http://css-tricks.com/almanac/properties/d/display/ 汇总了不同的 CSS 表格选项。

祝你好运！

Answer 3

使用 CSS！

<style>
@media screen and (min-width: 768px){
    .nav-search {
        position: absolute;
        bottom: 0px; 
    }
}
</style>

假设 nav/search 容器具有“nav-search”类。您可以应用这一小块 css 并为小/大屏幕使用完全相同的 html。没有Javascript！

查看此内容以了解@media 逻辑：http://css-tricks.com/css-media-queries/。