-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是關於樣式的。你的語義有三次相同的信息。 –