什么是响应式网页（Responsive web）？它与自适应网页（Adaptive web）的异同对比

Vũ Khôi

Wotech Electronics 博客作者

"什么是响应式网页（Responsive web）？"对科技圈而言，这或许已不再是陌生的问题，尤其在全球范围内以信息技术发展为核心的第四次工业革命愈演愈烈的背景下。响应式网页设计的意义和作用究竟是什么？

什么是响应式网页？探寻响应式网站的定义

尽管想必很多人已经知道响应式网页是什么，但在本文中我们仍想为尚不了解的读者再介绍一下这个概念。响应式网站（Responsive Website）是设计行业中的一个概念：当一个网站具备响应式特性时，它能够在多种不同屏幕/窗口尺寸的设备/浏览器上都良好显示。

那么，响应式网页"显示良好"的表现是什么？一个网站要被视为显示能力良好，需要其设计元素满足以下条件：

用户无需放大屏幕就能清楚阅读文字
网页界面有足够的留白和空间，让用户能够完成操作（例如准确点击CTA按钮、菜单等）
用户无需横向滚动屏幕就能读完内容

举个例子：当有人通过台式机或笔记本电脑浏览网页时，导航菜单是横向排列的；而当用户使用智能手机或平板电脑等移动设备访问网站时，菜单则沿屏幕纵向显示。此外，字号也会相应放大，文本版式也会调整以适配小屏幕，让用户阅读起来更轻松。

自适应网页（Adaptive web）和响应式网页（Responsive web）的区别是什么？

你是否好奇过自适应网页和响应式网页是什么？这两个定义有区别吗？自适应网页设计（Adaptive web design）为多种屏幕尺寸使用各自独立的版式，版式主要取决于所使用的屏幕尺寸。简单来说，每一种屏幕尺寸，设计师都会为其单独设计一套版式。

那么响应式网页是什么，与自适应网页有何不同？响应式网页设计（Responsive web design）让网页能够适配任何屏幕尺寸，无论目标设备的屏幕是什么。这种网页设计采用"流式"（liquid）布局，并借助CSS媒体查询来改变呈现样式。这种"流式"布局允许页面自行调整宽度和高度，以适配不同的屏幕尺寸并准确显示。换句话说，采用响应式设计，设计师无需为同一个网站设计多个版本来提升其在各类设备上的显示效果。

在决定选择自适应还是响应式网页之前，至少需要了解什么？

自适应设计与响应式网页之间最需要注意的关键区别是什么？那就是：自适应界面的尺寸灵活性远不如响应式网页设计。如果选择按自适应方向建设网站，你需要为每种不同的屏幕尺寸单独设计，这在你没有足够的资源和人力覆盖所有类型屏幕的情况下，会带来不小的成本和困难。

哪些理由证明了响应式网页的重要性？

当前趋势给响应式网页设计带来了怎样的影响？我们生活在一个这样的社会里：人们每天注视屏幕的时间，恐怕比注视身边人的时间还要多（听起来挺让人难过的！）。但也正因为如此，在线上广告形式的竞争中，你的网站和形象在各类数字媒体上出现得越多、越令人印象深刻，你获胜的机会就越大。

然而，电子设备的数量和种类日益多样化。如今大多数人都有属于自己的智能手机，用这些设备上网毫不费力。目前52%的网站流量（web traffic）来自移动设备，用户上网总时长的三分之二同样来自这些设备。

显然，移动设备使用人数迅速增长、以压倒性优势超过了使用传统电脑和笔记本电脑上网的人数，这使得Google等大型搜索引擎不可能置身事外。自从这家巨头出台收录（index）和排名网页的政策以来，设计一个具备响应式特性的网站就变得前所未有的重要和必要。和我们一起来看看响应式设计带来的好处吧！

企业从响应式网页中获得的好处是什么？

响应式网页带给你的第一个变化是什么？那就是提升对移动设备（平板电脑、智能手机）用户群体的触达能力。此外，灵活而不失一致性的设计能帮你增加触达和留住潜在客户的机会，从而提高转化率，最终提升销售业绩。从现在起投资响应式网站，意味着你将引领市场、走在竞争对手前面，尤其是当你所在的行业平时很少接触或需要更新信息技术知识时。

除了提升触达能力，响应式网页还有哪些优势？

要继续列举我们能从响应式网页中获得的好处，就不得不提到管理上的便利。当你拥有一个响应式设计的网站，就可以在需要时快速、轻松地同时更改界面和内容。这种灵活性是一大优势——当你只想快速调整设计或修改网站上的拼写错误时，只需操作一次即可；而如果使用自适应网页，显然要耗费时间和精力去修改网站的多个版本。由此，我们还能得到另一个好处：减少分析、跟踪、总结和汇报网站运行状况所需的时间、成本和精力。

响应式网页设计中与鼠标和触控相关的问题是什么？

响应式网页中触控与鼠标的关联是什么？面向移动设备的响应式网页设计，给开发者和设计师带来了挑战：鼠标操作（在台式机/笔记本上）与触屏操作（在移动设备上）的特性不同。确切地说，响应式网页设计中鼠标与触控的区别在哪里？在电脑上，用户通常使用鼠标（外接鼠标和触摸板）来导航并点击想要的选项。在智能手机或平板电脑上，用户主要依靠手指触碰屏幕来操作。与简单且精度更高的鼠标控制相比，用手指触碰屏幕上的一个小点的准确度要低得多。网页设计师必须考虑如何做好网站的响应式设计，让用户拥有足够的"空间"，确保每一次触碰都能精准导航。

设计响应式网页时还需要注意哪些其他问题？

除了键盘和鼠标，响应式网页中还需要关注什么问题？那就是图形和网页加载速度。当然，图形精美的网站会吸引更多用户、给人留下更深的印象。但作为设计师，你必须考虑到：当用户使用移动设备浏览网页时，其所用的移动网络可能不适合加载这些特效，从而拖慢网页加载速度。这会直接影响用户跳离页面的决定。因此，对于在移动设备上显示的网页版本，展示比电脑端更少的图形或许才是明智之举，以免网站在智能手机上加载耗时过长。