私はアダプティブデザインについてたくさん読んできました。ある時点で見つけることができたすべてのソースは、サーバー側のアプローチについて言及しているか、少なくとも、クライアントが必要とするものだけを提供するため、ロード時間を短縮する方法について述べています。レスポンシブ デザインとは対照的に、たとえばメディア クエリによって、クライアント側に適応する 1 つのコンテンツを配信します。流動的なグリッドとレイアウトが頭に浮かびます。
しかし、私は非常に基本的で単純で、(私の理解では) かなり骨の折れるアプローチを考えましたが、そのためのパターンを見つけることができませんでした。めんどくさいからでしょうね。
私のアイデアは、基本的に、アダプティブ デザインで通常行うように、デバイスごとに個別のビューを作成することでしたが、それらを 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>編集：これまでのコメントに感謝します！強調したいのは、これがほぼアンチパターンの定義であることに完全に同意するということです。私の質問がそれを明確にすることを願っています! 私はこれを実用的なものとは考えていません。しかし、私はこれが何と呼ばれているのか (それが何かと呼ばれている場合)、または定義上まだ適応性/応答性があるかどうかに興味があります。そうでない場合、なぜですか？