-1
我已经阅读了很多关于自适应设计的文章。我在某处可以找到的所有资源都提到服务器端方法，或者至少谈论它如何缩短加载时间，因为您只能满足客户需求。与响应式设计相比，您可以通过媒体查询提供一种适合客户端的内容。流体网格和布局出现在我脑海。这种模式叫什么？自适应设计？
但是，我认为一个非常基本的，幼稚，（从我的理解）很愚蠢的做法，我只是找不到一个模式的。可能是因为它太无聊了。
我的想法是basicly手艺为每个设备就像你通常与适应性设计做一个独立的观点，但把它们放到div的，只是显示设备的尺寸相匹配的。这当然delievers，取决于视图，约Ñ -times尽可能多的数据服务器侧自适应设计将与Ñ是不同的视图的数目。然而，视图可以在不重新加载页面的情况下实时切换。再次，只是我的想法。根据我的理解，它采用了自适应设计，而采用了另一种技术方法。 这是模式还叫自适应设计吗？
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>编辑：由于迄今为止评论！我想强调一下：我完全同意这一点，它几乎是反模式的定义。我希望我的问题能够说清楚！我不认为这是一个实际的事情。但是，我对所谓的（如果它被称为任何东西）感兴趣，或者如果它仍然是自适应的/响应的定义。如果不是，为什么？
不，这* pattern *被称为*糟糕的设计*，原因很多，其中一些已经提到过。在考虑这一点时，可能需要一小时才能记下所有想到的原因。 – connexo
这将是响应式设计的更糟糕版本。 – Nit
“HTML”是关于语义的。 CSS是关于样式的。你的语义有三次相同的信息。 –