我应该如何处理响应式设计中的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
}

希望这可以帮助.