随着近些年来移动互联网的飞速发展,新型设备也层出不穷。各种设备随时随地接入互联网的而需求也日益强烈。此时,同一个网站在不同设备上的展示就成了一大难题。响应式设计的出现为跨设备的问题提供了一种全新的解决思路。但响应式设计需要解决的不仅是设备不同造成的设备尺寸、分辨率不同等问题,还要解决不同设备的使用情景不同的问题。本文从以上两个维度进行深入研究。首先,响应式设计解决不同设备尺寸不同的问题。媒介查询技术作为响应式设计的核心,如何科学的设置媒介查询的断点,成为了目前亟待解决的问题。本文对响应式设计流程及媒介查询断点设置的现状进行总结分析,提出不足,并提出了一种从设计的角度出发,以用户体验优劣为标准的设置媒介查询断点的方法。进行案例设计,并通过实验对比所提出方法与原方法的满意度,从而验证了该方法的可行性,为响应式设计中媒介查询断点的设置提供了具有指导意义的方法。随后,响应式设计解决不同设备使用情境不同的问题。本文分析了web设计和移动设计的常用控件类型,并进行提炼和归纳,总结出最基础的单选、多选功能的几种控件形式进行实验,通过实验数据分析得到不同控件在不同情境下的适用性。最后,本文依据所做的两个维度的研究成果,设计一款响应式设计工具。设计过程包括需求分析、竞品分析、原型设计、视觉设计、设计思路说明等过程。所设计的产品具有科学的研究基础,希望能够为这一领域的设计师们作出贡献。