【问题标题】：What is this pattern called? Adaptive design?这种模式叫什么？自适应设计？
【发布时间】：2015-08-17 08:31:15
【问题描述】：

我阅读了很多关于自适应设计的文章。我在某些时候能找到的所有资源都提到了服务器端方法，或者至少谈到了它如何缩短加载时间，因为你只提供客户端需要的东西。与响应式设计相比，您交付一种在客户端适应的内容，例如通过媒体查询。我想到了流畅的网格和布局。

但是，我想到了一种非常基本、幼稚且（根据我的理解）相当愚蠢的方法，我只是找不到模式。可能是因为太无聊了。

我的想法基本上是为每个设备制作一个单独的视图，就像您通常使用自适应设计所做的那样，但将它们放入 div 中并仅显示与设备尺寸匹配的视图。当然，根据视图，这会提供大约 n 倍于服务器端自适应设计的数据，其中 n 是不同视图的数量。然而，视图可以在不重新加载页面的情况下即时切换。再次，只是我的一个想法。据我了解，它做了自适应设计所做的事情，只是使用了另一种技术方法。 这种模式还叫自适应设计吗？

switches.css 和 index.html

    
    @media (max-width: 991px) {
        .phone {
            display: inline !important;
        }
        .tablet {
            display: none !important;
        }
        .pc {
            display: none !important;
        }
    }
    
    @media (min-width: 992px) and (max-width: 1199px) {
        .phone {
            display: none !important;
        }
        .tablet {
            display: inline !important;
        }
        .pc {
            display: none !important;
        }
    }
    
    @media (min-width: 1200px) {
        .phone {
            display: none !important;
        }
        .tablet {
            display: none !important;
        }
        .pc {
            display: inline !important;
        }
    }
    
    html {
        font-family: sans-serif;
    }
    
    h1 {
        font-size: 36px;
    }

 <!DOCTYPE html>
    <html>
      <head>
        <title>Am I adaptive?</title>
        <meta name="viewport" content="width=device-width" initial-scale="1">
        <link href="switches.css" rel="stylesheet">
      </head>
      <body>
        <div class="phone">
          <h1>on small screen</h1>
          <p>Here goes the view for small sized devices</p>
        </div>
        <div class="tablet">
          <h1>on medium screen</h1>
          <p>Here goes the view for medium sized devices</p>
        </div>
        <div class="pc">
          <h1>on large screen</h1>
          <p>Here goes the view for large sized devices</p>
        </div>
      </body>
    </html>

编辑：感谢到目前为止的 cmets！我想强调：我完全同意这几乎是反模式的定义。我希望我的问题说明了这一点！我不认为这是一件实际的事情。但是，我对它的名称感兴趣（如果它被称为任何东西），或者它是否仍然根据定义是自适应/响应的。如果不是，为什么？

【问题讨论】：

不，这个模式被称为bad design，原因有很多，其中一些你已经提到过。我可能需要一个小时才能写下考虑到这一点时想到的所有原因。
这将是响应式设计的一个更糟糕的版本。
HTML 是关于语义的。 CSS 是关于造型的。你的语义有 3 次相同的信息。

标签： html css responsive-design adaptive-design

【解决方案1】：

在我看来，这更像是一种反模式，或“响应式”设计模式。

自适应设计的重点是限制浏览器的工作量，同时减少进出设备的流量。

想想这将如何在带宽较差的设备上工作，例如信号不完整的手机。从可用性的角度来看，让服务器根据用户代理或其他标准来决定向设备发送什么更有意义。

【讨论】：

我很惊讶你在这种情况下提到响应，因为我在那里所做的（据我的理解）任何东西，但没有响应。 related SO question
它只是广义上的响应，因为设备控制着布局。本质上，它接收整个内容，然后隐藏它决定不想看到的位，换句话说，“响应”显示大小。只加载需要的内容要好得多，例如通过有一个登录页面来确定客户端的屏幕分辨率，然后重定向到“真实”页面，将屏幕大小和其他信息传递给服务器，服务器可以提供服务适当的内容。