当代网站须要在每个屏幕上都具有良好的外不雅观和功能。正如网页设计师多年来一贯被奉告的那样，这并不是***了。但是要实现它，不仅仅有一种方法可以实现，例如自适应设计和相应式设计，我们将在本文中进行谈论。
当用于描述这些技能的术语时，可能会有些混乱。与设计和开拓的许多方面一样，我们被许多盛行词淹没。有时它们变得如此混乱，以至于我们（缺点地）互换利用它们。的确，自适应和相应式设计都具有相似的终极目标：确保在大屏幕，小屏幕以及介于两者之间的所有内容上都具有出色的用户体验。但是他们采纳了截然不同的方法来达到目标。
本日，我们将深入研究这些差异，以帮助您为项目选择精确的办理方案。
两种技能中比较常用的一种是，相应式设计根据浏览器的大小重新排列内容。
CSS文件用于设置一个或多个断点，通过视口分辨率，网站的选定元素将根据这些视点进行调度。断点常日设置为模拟盛行的移动设备（包括电话和平板电脑）的屏幕尺寸。
一个常见的例子是相应式导航。考虑一下在更大的屏幕（条记本电脑和台式机）上显示的全角导航栏。可以想象，随着视口的缩小，可以将菜单设置为调度任何数量的办法来利用可用空间。然后，在最小的移动屏幕上，相同的导航然后隐蔽在“汉堡”菜单下。
相应式多列布局也很盛行。设计职员常日将它们配置为在较小的屏幕上彼此“堆叠”。在平板电脑等中型屏幕上，色谱柱可能会保持完全或部分堆叠。该功能实际上内置于CSS规范中，例如Flexbox，它会根据屏幕实际情形自动调度列。
相应式设计的上风利用相应式设计技能的最大上风大概是，用户在每台设备上都能得到基本相同的网站。这种连续性使频繁访问的访客可以更轻松地找到他们想要的东西。
其余，向CSS添加相应元素相对大略。这是取用大屏幕上的内容并相应地针对各种断点进行调度的问题。纵然是在智好手机革命之前设计的较旧的网站，也可以轻松进行改装。
末了，由于给定页面的内容和在全体视口范围内都是相同的，因此相应式设计更适宜SEO。由于这种同等性，搜索引擎方向于更好地处理这些网站。
缺陷做出相应并不是所有的好。在大屏幕上，某些网站布局可能很好，但在较小的视口上则更难管理。
可能须要进行大量的滚动操作，纵然这已经不像以前那样令人忌讳了。其余，某些交互式或代码繁重的元素可能太多且笨重，无法在手机上利用。
什么是自适应设计？自适应设计，也称为“ 渐进式增强 ”，是为各种屏幕尺寸创建几种固定布局的过程。实质上，设计师可以为手机，平板电脑和台式机创造完备不同的体验。
这个想法是从最基本的东西开始，然后“增强”大屏幕的体验。用户拥有的屏幕空间越多，可用的元素就越多。
可视化自适应设计和自适应设计之间差异的一种方法：不雅观察在调度桌面设备上的Web浏览器大小时给定网站的反应。
相应性网站会在您达到特定断点时不断调度内容。列可以堆叠，容器和版式可以缩放。
有了自适应网站，布局就不会不断变革。相反，新的断点可能会带来全新的布局-因此，乃至在内容上可能存在一些差异。例如，某些在手机视窗上不必要的项目可能会被完备删除。
自适应设计的上风履行自适应设计意味着真正把用户放在第一位。通过为特定的屏幕尺寸设计单独的体验，设计职员可以限定相应站点常常涌现的痛点。
例如，移动用户将仅看到与他们干系的设计和内容元素。从理论上讲，该网站该当在较小的触摸屏上更易于浏览，内容也更易于消化。
然后，随着更多屏幕尺寸和打算能力的发挥，这些额外的功能将被添加进来。自适应设计是网络并非千篇一律的最好表明。
缺陷由于您要创建单独的体验，因此履行自适应设计技能可能会非常耗时。对付预算，截止日期或韶光紧的项目，这尤其值得关注。
然后，还可能会涌现不一致的用户体验。把稳细节在这里非常主要，由于网站将须要供应单独但相似的外不雅观，觉得和功能。在设计过程中短缺细节或做出一些缺点的决定可能会影响在一个或多个设备上利用网站的能力。
说到设备，新设备一贯在发布。有些具有独特的视窗，可以想象将其供应给“缺点”的布局。因此，可能须要例行检讨以确保您的站点利用最新技能。
对付利用“m.yoursite.com”等供应仅移动版本的网站，SEO也是一个问题。那不会在每种情形下都起浸染，但是仍旧值得考虑您的项目是否受到影响。
选择精确的设计技能
您如何知道哪种技能最适宜您的项目？在许多情形下，这可能是韶光和金钱的问题。为此，相应式设计实现起来更快，更便宜。
如果您利用的是WordPress主题之类的第三方产品（常日带有相应模样形状式），那么您已经为您做出了决定。
但是，自适应设计仍旧霸占一席之地。对付拥有预算和韶光资源的大型网站，设计职员可以利用自适应技能为每台设备供应出色的体验。
无论哪种办法，最主要的是确保您的网站对每个用户都运作良好。值得光彩的是，有两种经由实践考验的方法可以使其成为现实：自适应或相应式设计。
