网页在PC、笔记本电脑、平板电脑或智能手机上的显示方式取决于网站设计。网页设计师在构建网站时可以采用固定、流动、自适应或响应式设计。我们对响应式和自适应web设计技术进行了比较，以帮助您了解这两种流行方法之间的差异。

响应性网页设计

• 为所有设备提供类似的布局。
• 更适合广泛的受众。
• 不一致的用户界面。

自适应网页设计

• 为不同的设备提供不同的布局。
• 更好地接触目标受众。
• 设计是为个人用户量身定做的。

在智能手机出现之前，网站是为台式机和笔记本电脑屏幕设计的。随着能够访问互联网的设备数量的增加，有必要设计能够适应不同屏幕大小的网页。

响应性和适应性的网页设计有着相同的目标：让访问者更容易查看和浏览网站。这两种方法都可以根据用户的设备调整站点的布局。两者之间的主要区别在于，自适应设计需要为不同的设备创建多个版本的站点。

响应式网页设计的优缺点

优势

• 更好的搜索引擎优化。
• 建造和维护工作量减少。
• 免费响应主题很容易找到。

缺点

• 提供对不同设备上布局外观的有限控制。
• 明显慢于自适应网站。

查看响应式网站时，该网站会适应PC、平板电脑或智能手机上的任何web浏览器。响应式设计使用CSS媒体查询根据目标设备更改网站外观。当网站在浏览器中打开时，来自设备的信息用于自动确定屏幕大小并相应地调整网站框架。

响应式web设计使用断点确定内容中断的位置，以适应不同大小的屏幕。这些断点缩放图像、包装文本并调整布局，使网站适合屏幕。由于搜索引擎优先选择手机友好型网站，响应性强的网站通常会获得更高的谷歌排名。

新站长可能会发现设计响应性网站更容易，因为这些网站的构建和维护工作量更少。如果您使用WordPress等内容管理平台（CMS），您可以找到使用响应式设计的免费主题。

作为易于实现的交换，响应性网页的加载速度比自适应网页慢。此外，这些页面可能并不总是提供最佳的用户体验，这取决于页面元素的排列。

自适应网页设计的利弊

优势

• 布局针对每个用户进行了优化。
• 比响应速度快两到三倍的网站。
• 更容易跟踪用户分析。

缺点

• 比响应性设计更耗时。
• 没有搜索引擎友好。
• 需要仔细的流量分析来优化用户体验。

在adaptive design中，为用于查看站点的每个设备创建不同的网站。Adaptive web design检测屏幕大小并加载该设备的适当布局。因此，在PC上交付的体验可能不同于在移动设备上交付的体验。例如，旅游网站的桌面版可能会在主页上显示有关度假目的地的信息。同时，手机布局可能会在主页上显示预订表单。

自适应网页设计基于六种屏幕宽度，从智能手机的320像素到台式电脑的1600像素不等。网页设计师并不总是针对所有六种尺寸进行设计。他们关注他们的网络分析和最常用设备的设计。

自适应设计还允许逐步增强网站。对于需要升级的旧站点，自适应设计从现有页面内容开始，并通过添加更多功能逐步增强站点。这种方法的好处是，每台设备都可以查看基本内容，适合其中一种自适应布局的设备可以查看增强的站点。

自适应站点向访问者的web浏览器发送较少的数据以交付内容。因此，使用适应性设计的网站通常比使用响应性设计的网站要快得多。