2.2 自适应设计与响应式设计

2.2.1 对比

自适应设计和响应式设计这两个概念非常容易混淆，本书不强调去死记硬背，因为很多和设计和思维相关的专业词语，就算大家记得再滚瓜烂熟也没有任何价值。最终，实践才是检验学习成果的唯一标准。为了让大家更好地理解这两个概念，这里只给出它们的对比方法。

自适应网页设计（Adaptive Web Design），简称AWD。

· 有可能会针对移动端用户减去内容或功能，使用不同的URL前缀，如亚马逊、淘宝等。

· 偏向以桌面为中心的Web·APP，可以使用硬件辅助，符合一些现代的用户体验方式。

· 速度有优势，增强了用户体验。

· 量身定做，制作成本高，后期维护成本高。

响应式网页设计（Responsive Web Design），简称RWD。

· 倾向于只改变元素的外观布局，而不去大幅度改变内容，依赖屏幕尺寸来改变视觉展现方式。

· 使用同一个URL，符合搜索引擎友好习惯。

· 仍然是Web设计的流行技术。

再说简单通俗点儿：

Adaptive=Devices（自适应是对于设备而言）。

Responsive=Dimensions（响应式是对于尺寸而言）。

2.2.2 运用

自适应设计和响应式设计有个共同点：都是基于不同的屏幕尺寸和屏幕分辨率来设计的。本书基于界面设计，是按照Web的分辨率标准去设计不同尺寸的界面。为了让大家更好地理解和运用，首先大家务必使用Photoshop CC的软件版本，它可以直接选择相应的Web尺寸和分辨率，设计师可以在软件默认尺寸选择的基础上加以扩展和运用，这样能够避免各种知识和参考带来的迷惑。

在【新建文档】窗口有照片、打印、图稿和插图、Web等类型的尺寸供选择，大大提高了设计师建立画布的准确性。当新建一个文件时，即可选择对应的尺寸，以满足不同的界面设计需要，如图2-6所示。

当然，如果大家不使用默认的Photoshop尺寸，可以参看本书第4章中表4-1和表4-2（分辨率及尺寸参考数据）进行尺寸设置，表格中列出的尺寸是常用于网页设计中的参考尺寸，并不代表全部。响应式设计对于初学者甚至是经验不多的在职人员而言，都是一个很复杂、学起来相对不容易的知识。学习基本的响应式规范容易，但是实际运用到项目中，就不是那么得心应手了。这是一个过程，如果大家学习第4章的表格比较吃力，不要操之过急，自己多去实践，慢慢找出响应式断点的意义。这些数据并非在任意项目中都是固定的，具体的响应式断点数值，还需要根据具体的项目设计方案及项目使用的前端开发框架来考虑。