switches.css和index.html

Question

我已经在自适应设计上做了很多阅读。我在某些时候可以找到的所有来源都提到了服务器端方法或者至少谈论它如何加快加载时间，因为你只服务于客户端需要的东西。与响应式设计相比，您可以通过媒体查询提供一个适合客户端的内容。我想到了流体网格和布局。

然而，我想到了一个非常基本的，幼稚的（从我的理解）漂亮的愚蠢的方法，我找不到一个模式。可能是因为它太无聊了。

我的想法基本上是为每个设备制作一个单独的视图，就像你通常使用自适应设计一样，但是将它们放入div中，只显示与设备尺寸相匹配的设备。这当然取决于视图，关于 n - 与服务器端自适应设计一样多的数据，其中 n 是不同视图的数量。但是，视图可以在不重新加载页面的情况下即时切换。再一次，我只是一个想法。根据我的理解，它只是采用另一种技术方法来实现自适应设计的功能。 此模式仍称为自适应设计吗？

switches.css和index.html

＆＃13;

    
    @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;
    }

＆＃13;

 <!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>

＆＃13;

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

Answer 1

对我而言，这似乎更像是一种反模式，或者“反应灵敏”。设计模式。

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

考虑一下如何在带宽较差的设备上运行，例如带有零散信号的手机。从可用性的角度来看，服务器根据用户代理或其他标准决定向设备发送什么更有意义。

这种模式叫什么？自适应设计？

switches.css和index.html

1 个答案: