我已经阅读了很多关于自适应设计的内容。我在某些时候能找到的所有资源都提到了服务器端方法,或者至少谈论了它如何缩短加载时间,因为你只提供客户端需要的东西。与响应式设计相比,您交付一种在客户端适应的内容,例如通过媒体查询。我想到了流体网格和布局。
但是,我想到了一种非常基本、幼稚且(根据我的理解)非常愚蠢的方法,我只是找不到模式。大概是因为太闷了。
我的想法基本上是为每个设备制作一个单独的视图,就像您通常使用自适应设计所做的那样,但将它们放入 div 中并仅显示与设备尺寸匹配的视图。当然,这取决于视图,提供的数据大约是服务器端自适应设计的n倍,其中n是不同视图的数量。然而,视图可以在不重新加载页面的情况下即时切换。再次,只是我的一个想法。据我了解,它做了自适应设计所做的事情,只是使用了另一种技术方法。这种模式还叫自适应设计吗?
switch.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>
编辑:感谢到目前为止的评论!我想强调:我完全同意这几乎是反模式的定义。我希望我的问题说明了这一点!我不认为这是一件实际的事情。但是,我对它的名称感兴趣(如果它被称为任何东西),或者它是否仍然根据定义是自适应/响应的。如果不是,为什么?