步骤1:确定兼容的设备类型和屏幕尺寸

通过用户研究，了解用户使用的设备分布，并确定需要兼容的设备类型和屏幕尺寸。设备类型:包括移动设备(手机、平板电脑)和个人电脑。对于移动设备，在设计和实现时应注意添加手势功能。屏幕尺寸:包括各种手机屏幕的尺寸(包括水平和垂直)，各种平板的尺寸(包括水平和垂直)，普通电脑屏幕和宽屏。需要考虑的问题:在响应设计中，某个页面的适用尺寸范围是多少？例如，搜索网站的搜索结果页面可以从移动电话跨越到宽屏。然而，由于其复杂的结构，直接迁移到移动电话是不现实的。最好是直接设计一个手机版的主页。根据用户需求和实施成本，选择适用的规模。例如，对于一些功能操作页面，用户通常不需要在移动端操作，也不需要被动设计。

步骤2:制作线框原型

要为确定的尺寸制作不同的线框原型，必须考虑页面布局如何变化、内容大小如何缩放、功能和内容如何删除，甚至为特殊环境进行特殊设计。这个过程需要设计师和前端开发人员保持密切的沟通。

需要强调的是，响应设计的目的是为不同设备的屏幕规格间隔预设功能和内容的输出格式，因此我们只需要选择一些有代表性的设备，而不是考虑所有已知的规格类型。制作线框原型的主要目标是规划样式背后的逻辑。

步骤3:测试线框原型

将图片导入相应的设备进行一些简单的测试可以帮助我们尽快找到可访问性和可读性方面的问题。

第4步:视觉设计

请注意，移动设备每英寸的屏幕像素不同于传统的计算机屏幕。在设计过程中，应确保内容文本和控件的可点击区域的可读性。

[/h 1。尽量保持小屏幕简单。在ui元素风格方面，我们可以与前端开发人员进行更多的交流，并尽最大努力采用可以通过css3实现的传统风格风格，以减少背景图片的使用。

[/h 2。确保内容的字体大小在所有设备上都足够可读，尤其是在手机上。

[/h 3。类似于传统的网页设计和开发，最终的页面肯定会不同于视觉草稿。特别是对于反应灵敏的网站，由于需要有能力调整和改变布局结构和细节风格，在开发过程中减少设计问题的可能性更大。

步骤5:前端实施

与传统的网页开发相比，响应性设计页面在页面布局和内容大小上都发生了变化，因此最终的输出更有可能不同于设计草案，需要前端开发人员和设计人员之间进行更多的沟通。