什么是自适应网站设计？响应式设计和自适应设计有什么区别？

什么是自适应网站设计？

自适应网站设计又称为响应式设计，是指同一项网站设计技术。

网站设计最早只需符合计算机屏幕分辨率，但手机迅速取代计算机成为上网工具，即使手机与计算机屏幕分辨率相同，画面呈现却完全不同，成为网站设计难题。为了解决这个问题，响应式网站设计可以根据显示器的分辨率，自动调整版面的布局。使用笔记本电脑、手机、平板电脑等设备，浏览网站都有最佳体验。

响应式设计和自适应设计有什么区别？

不过，响应式设计和自适应设计有些区别，早期也有人以液态版型称呼自适应网站设计。自适应设计允许网站内不同元素，布局在不同分辨率的屏幕上。而响应式网站设计则是可以更为弹性的调整，例如某些功能只会在桌上型网站出现，而不会出现于手机网站。但如今大部分的人都会将这两个技术视为相同的技术。

远离网站显示问题

今天人们使用更多元的方式访问网站与网站，已经不再受到手机尺寸、屏幕分辨率等问题困扰，这是许多设计师与工程师心血调整出来的结果，事实上背后仍有许多技术细节是不为一般人所知的，举例来说：

操作接口

计算机使用鼠标，手机使用触控，是两种设备最大的区隔，自适应与响应式设计大多可以完美处理操作界面的差异，但仍有一些问题：例如在手机上文字过小的问题，计算机端上看起来又会过大，不熟悉的设计师可能第一次会感到困扰，必须试图找到最佳设计解决方案。

网站结构

网站结构无论是计算机或手机并无影响，因为网站结构是一种网站设计原则，设计师应该要留意结构化/显示内容的重要性。有哪一些必然出现的，必然要保留的，请留下来。举例来说，手机上并不适合填写大量文字，有些表格与字段的部分，可以通过技术将其隐藏起来减少结构的混乱。

网站导览

导览在选择响应式和自适应网站设计时，要考虑的另一个问题。导览菜单告诉我们要走哪条路，因此请确保无论是手机或计算机都可以看到网站导览，最好是在页尾也要添加导览信息。

视觉特效

感谢HTML5的技术，目前网站上的特效已经可以结合响应式网站设计，无论桌上计算机或手机都看得到，但对手机来说，过多特效仍是很大的运算负担。有些设计师的共识是：当响应式在手机平台时，减少或是停用视觉特效。

菜单图示

图示很棒，过去网站设计很管用，如今也是如此，但近年图示有些泛滥成灾，挑选对用户有效的图标，而不是灌水使用无意义的图示。许多响应式网站设计框架有默认的图示，已经非常直观实用且国际通用，设计师大可不须重新自己自制图示。

页签适用性

约略十年前页签(Tab)的设计非常风行，但手机的显示画面受到限制，页签会占用许多画面，反而是一个大问题。你可以试着使用少许的页签达到同样的用途，但切勿大量使用导致操作上的不便。