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

Posted 2023-03-06

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

【英文标题】：How should I handle DOM changes in responsive design? [duplicate]

【发布时间】：2014-07-07 23:18:58

【问题描述】：

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

宽屏：

=================
     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 解决方案是一个更强大、更适合该任务的工具。

【问题讨论】：

讨厌说“扔另一个库”，但您可能会对IntentionJS 感兴趣。

IntentionJS 令人印象深刻，但出于“放置操作”（本示例中我唯一需要的功能）的目的，它看起来并没有少写标记。

虽然 IntentionJS 看起来比 jQuery 执行得更快。

【参考方案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

希望这会有所帮助。

【讨论】：

Flexbox 专为此目的而设计。 +1 :)

啊哈，我忘了flexbox的这个功能。太糟糕了，还没有新语法的 polyfill……不过这可能是最正确的答案。

这真的很有趣。旧浏览器获得“未优化”的 DOM 顺序是可以接受的优雅降级吗？我倾向于是的。

@SamNabi 有almost 2/3 support for modern flexbox specifications，但如果考虑部分支持，您将获得>82% 的支持。不过，IE8 和 9 尘埃落定：/

【参考方案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 表格选项。

祝你好运！

【参考方案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/。

【讨论】：

如果 hero 和 nav-bar 是可变高度怎么办？如何确保绝对定位的页脚不与英雄重叠？

依靠绝对定位是布局地狱的捷径。我实际上也在尝试这种方法，但正如@levi 提到的，当您不知道内容的大小时，它真的会失控。

我做了一个小提琴：jsfiddle.net/c4e84/2。本质上，给容器一个 padding-bottom 等于 nav-search 的高度。