你是否在决定网站应以响应式设计或自适应设计之间做出选择时遇到困难？没关系，我们了解你的问题，并将在此篇文章中引导你了解自适应网站和响应式网站的基础知识。

文章纲要：

1. 什么是自适应网站？

2. 自适应网站的好处与坏处

3. 自适应网站范例

4. 什么是响应式网站？

5. 响应式网站的好处与坏处

6. 响应式网站范例

7. 比较自适应网站与响应式网站

1. 什么是自适应网站？

让我们从自适应网站设计开始。自适应网站设计一词是在网页设计师 Aaron Gustafson 所著的 《Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement》 一书中引入的词汇。

自适应网站具有多种固定布局大小，当网站确定任何设备上的可用空间时，它会为设备萤幕选择最合适的布局。因此，调整浏览器大小对网站的自适应布局没有影响。例如，当你在行动设备上打开浏览器时，网站将为该行动设备萤幕选择最佳布局。

一些老牌企业（如 Amazon 和 Apple ）都已将自适应布局纳入其网站设计中，并针对不同的行动设备进行网站优化效果。记住，自适应网站需要网页设计师为不同的设备萤幕设计不同的布局，而不是让同一个设计布局在不同的设备上自己重新排列。

自适应网站有六种最常见的萤幕排版设计：

• 320 像素
• 480 像素
• 760 像素
• 960 像素
• 1200 像素
• 1600 像素。

2. 自适应网站的好处与坏处

• 好处

加载速度更快，网页设计师可以控制每个布局，因为他们能够为每个萤幕尺寸建立新的最佳设计，网页设计人员也可以针对不同的萤幕尺寸添加或减少内容。

• 缺点

自适应网站上的多个布局可能导致内容重复，从而影响网站在搜索引擎的排名，更改网站排版还需要设计师投入大量的时间和精力。

3. 自适应网站范例

• IKEA

IKEA

IKEA的行动网站采用针对行动设备萤幕优化的自适应设计。它简化了选单和浏览，还突出了购物清单选项（在网站的桌面版本上不可见）。此设计面向在实体店购物时使用手机的客户。

• Adidas

Adidas

Adidas 的自适应网站利用自适应布局来模仿桌面网站，为行动设备用户提供更流畅的体验。它为客户提供更轻的图像和更简单的线上购物流程。

• Turkish Airlines

Turkish Airlines

Turkish Airlines 允许他们的网站用户在三种版本的自适应布局之间进行选择：桌面网站、行动网站和应用程式。该品牌的行动网站具有时尚的外观且更简单的网站功能，以适应较小的萤幕宽度。其网页设计师着重显示网站的搜索功能（例如线上办理登机手续和航班状态），以及为希望预订航班的移动用户提供的航班预订功能。

4. 什么是响应式网站？

那什么是响应式网占设计呢？这个术语是在 2011 年由网页设计师和开发人员 Ethan Marcotte 编写的《 Responsive Web Design 》一书中引入的。响应式网站的设计方式是透过调整设计元素的位置来响应浏览器宽度的变化。

具有响应式布局的网站上的内容将自动根据可用的浏览器空间展示给用户。与自适应网站相反，如果你在桌面上打开响应式网站，然后更改浏览器视窗大小，内容大小也将有所改变以针对浏览器视窗自行安排最佳呈现效果。

5. 响应式网站的好处与坏处

好处：

响应式网站仅使用单个 URL 来适应每个页面的任何萤幕尺寸，其设计过程也只需要更少的时间。响应式设计允许网站在所有设备上呈现一致性，这是获得良好用户体验的重要因素，这也使其更适合搜索引擎优化 (SEO)。

缺点：

响应式网站的加载速度较慢。在网站上线之前，大量的调整和审核对于开发过程至关重要，因为响应式网站需要能够自我更改以适应任何萤幕。 由于设计元素四处移动，响应式网站上的图像可能会变形。

6. 响应式网站范例

• Real Meal Grill

电脑版：

行动设备版：

• Dr Chai Tea

电脑版：

行动设备版：

• Grow Food Where People Live

电脑版：

行动设备版：

7. 比较自适应网站与响应式网站

• 开发困难度

自适应网站更易于开发，但需要设计师花费更多时间来打造不同的几版网站设计。记住！为一个网站建立多个布局比建立适合任何萤幕尺寸的单一布局要容易得多。

• 灵活性

自适应网站的一个缺点是，它只能在适配其布局的萤幕上运行。因此，如果用户使用新发布的新萤幕宽度设备，你建立的自适应网站布局可能就无法正确呈现，这意味着你将不得不编辑它们或建立一个新的。

• 加载速度

自适应网站需要在用户打开网站时加载开发的每个布局，而响应式网站只需要加载适合所有萤幕宽度的单个布局。由于所有额外的布局和资源，自适应网站将比响应式网站花费更多的时间来加载。然而，情况并非总是如此，你也需要考虑网站内容与大小。

透过 建设一个响应式网站

你是否恰好在寻找一个网站建设平台来帮助你建立一个全新的响应式网站？如果是，那我建议你考虑 ，该专业平台具有行动视图功能，可让你预览网站在行动萤幕上的外观，这允许你在继续构建响应式页面时根据需要更改内容。 向所有用户提供大量免费的高品质网站模板，即使你对写程式和网站建设毫无经验也可以独立完成一个网站。你也可以点击这里查看更多能让你的网站对行动设备用户更友善的行动战略。

文章总结

这篇文章与你分享了响应式网站与自适应网站的定义以及它们之间的区别，按照上述内容，不难发现为你的网站采用响应式设计将更节省时间，精力与花费（尤其是当你有了 这种专业建站平台的帮助下）。其还具有帮助你最大化适应所有电子设备萤幕的功能，以确保你的网站完好地展示在所有访客眼前。别再犹豫了！现在就加入 获取一个专业的响应式网站吧！如果对内容有疑问，可以透过 support@strikingly.com 与我们联络。