自适应设计与响应式网页设计的区别

相关推荐

自适应设计与响应式网页设计的区别

　　目前非常流行自适应设计与响应式设计，而且经常让人混淆，自适应设计不应与自适应布局混为一谈，它们是完全不一样的概念。不妨来看看自适应设计与响应式网页设计的区别到底在哪里。以下仅供参考！

　　在这先说明下这两者的异同：

　　自从移动终端飞速发展以来，各种各样的机型突飞猛进，很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

　　于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

　　2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

　　自适应布局有它的使用价值，在于它能够提供一种更加实用的解决方案，使得项目的实现成本更低，并且更加易于测试。一个自适应布局可以被看作是响应式布局的一个更加廉价的替代品，会在项目资源紧缺的情况下更具有吸引力。

　　而在响应式布局中你却要考虑上百种不同的状态:

　　响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标就是去解决设备多样化问题。

　　响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。

　　当固定宽度与流动宽度结合起来时，自适应布局就是一种响应式设计，而不仅仅是它的一种替代方法。

　　那么如何进行响应式布局呢？下面就一步步为你揭开响应式布局的面纱：

　　Skill 1 学会运用 Css3 Media Queries，根据不同的屏幕分辨率，选择应用不同的Css规则

　　float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

　　自适应设计与响应式网页设计的区别

　　自适应网页设计也是响应式网页设计，响应式网页设计也是自适应网页设计。但是真正的细分起来，自适应只是响应式的一个子集，指网页中整体大图的自适应或者banner的自适应。

　　响应式设计可以一个网站兼容多个不同终端

　　响应式网页设计优势：流体网格的网站适合响应式网页设计。

　　1、灵活性强，可以适应不同分辨率的设备

　　2、方便快捷的解决多设备显示适应问题

　　自适应网页设计优势：固定断点的网站适合自适应网页设计。

　　1、实施起来代价更低，测试更容易

　　2、自适应布局可以让设计更加可控，因为它只需要考虑几种状态就可以了

　　虽然响应式/自适应网页设计会带来兼容各种设备工作量大、代码累赘、加载时间长的缺点，但它们能“一次设计，普遍适用”，可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局，它们不只是技术的实现，更多的是对于设计的全新思维模式。

　　什么是响应式设计？

　　两种技术中比较常用的一种是，响应式设计根据浏览器的大小重新排列内容。

　　CSS文件用于设置一个或多个断点，通过视口分辨率，网站的选定元素将根据这些视点进行调整。断点通常设置为模仿流行的移动设备（包括电话和平板电脑）的屏幕尺寸。

　　一个常见的例子是响应式导航。考虑一下在更大的屏幕（笔记本电脑和台式机）上显示的全角导航栏。可以想象，随着视口的缩小，可以将菜单设置为调整任何数量的方式来利用可用空间。然后，在最小的移动屏幕上，相同的导航然后隐藏在“汉堡”菜单下。

　　响应式多列布局也很流行。设计人员通常将它们配置为在较小的屏幕上彼此“堆叠”。在平板电脑等中型屏幕上，色谱柱可能会保持完整或部分堆叠。该功能实际上内置于CSS规范中，例如Flexbox，它会根据屏幕实际情况自动调整列。

　　响应式设计的优势

　　使用响应式设计技术的最大优势也许是，用户在每台设备上都能获得基本相同的网站。这种连续性使频繁访问的访客可以更轻松地找到他们想要的东西。

　　另外，向CSS添加响应元素相对简单。这是取用大屏幕上的内容并相应地针对各种断点进行调整的问题。即使是在智能手机革命之前设计的较旧的网站，也可以轻松进行改装。

　　最后，由于给定页面的内容和URL在整个视口范围内都是相同的，因此响应式设计更适合SEO。由于这种一致性，搜索引擎倾向于更好地处理这些网站。

　　缺点

　　做出响应并不是所有的好消息。在大屏幕上，某些网站布局可能很好，但在较小的视口上则更难管理。

　　可能需要进行大量的滚动操作，即使这已经不像以前那样令人忌讳了。另外，某些交互式或代码繁重的元素可能太多且笨重，无法在手机上使用。

　　什么是自适应设计？

　　自适应设计，也称为“ 渐进式增强 ”，是为各种屏幕尺寸创建几种固定布局的过程。本质上，设计师可以为手机，平板电脑和台式机创造完全不同的体验。

　　这个想法是从最基本的东西开始，然后“增强”大屏幕的体验。用户拥有的屏幕空间越多，可用的元素就越多。

　　可视化自适应设计和自适应设计之间差异的一种方法：观察在调整桌面设备上的Web浏览器大小时给定网站的反应。

　　响应性网站会在您达到特定断点时不断调整内容。列可以堆叠，容器和版式可以缩放。

　　有了自适应网站，布局就不会不断变化。相反，新的断点可能会带来全新的布局-因此，甚至在内容上可能存在一些差异。例如，某些在手机视窗上不必要的项目可能会被完全删除。

　　自适应设计的优势

　　实施自适应设计意味着真正把用户放在第一位。通过为特定的屏幕尺寸设计单独的体验，设计人员可以限制响应站点经常出现的痛点。

　　例如，移动用户将仅看到与他们相关的设计和内容元素。从理论上讲，该网站应该在较小的触摸屏上更易于浏览，内容也更易于消化。

　　然后，随着更多屏幕尺寸和计算能力的发挥，这些额外的功能将被添加进来。自适应设计是网络并非千篇一律的最好注解。

　　缺点

　　由于您要创建单独的体验，因此实施自适应设计技术可能会非常耗时。对于预算，截止日期或时间紧的项目，这尤其值得关注。

　　然后，还可能会出现不一致的用户体验。注意细节在这里非常重要，因为网站将需要提供单独但相似的外观，感觉和功能。在设计过程中缺少细节或做出一些错误的决定可能会影响在一个或多个设备上使用网站的能力。

　　说到设备，新设备一直在发布。有些具有独特的视窗，可以想象将其提供给“错误”的布局。因此，可能需要例行检查以确保您的站点使用最新技术。

　　对于使用“m.yoursite.com”等提供仅移动版本的网站，SEO也是一个问题。那不会在每种情况下都起作用，但是仍然值得考虑您的项目是否受到影响。

　　选择正确的设计技术

　　您如何知道哪种技术最适合您的项目？在许多情况下，这可能是时间和金钱的问题。为此，响应式设计实现起来更快，更便宜。

　　如果您使用的是WordPress主题之类的第三方产品（通常带有响应式样式），那么您已经为您做出了决定。

　　但是，自适应设计仍然占有一席之地。对于拥有预算和时间资源的大型网站，设计人员可以使用自适应技术为每台设备提供出色的体验。

　　无论哪种方式，最重要的是确保您的网站对每个用户都运作良好。值得庆幸的是，有两种经过实践检验的方法可以使其成为现实：自适应或响应式设计。

【自适应设计与响应式网页设计的区别】相关文章：

响应式网页设计技巧03-18

响应交互式网页设计12-03

响应式网页设计的工具有哪些11-17

如何快速测试响应式网页设计的Chrome扩展11-27