2015年，互联网上大热的响应式设计，掀起了一股网页设计新标准的浪潮，这里嘉纪商正谈谈响应式网站设计的一些现状与难点。
响应式网站设计的源起
2010年5月，伊桑马科特利用三种已有的工具：流动布局、媒介查询和弹性图片创建了一个在不同分辨率屏幕下都能漂亮地显示的网站。他力劝设计师们利用Web独有的特性去进行设计，以下介绍三个概念：流动布局、媒介查询和弹性图片
1、媒介查询
媒介查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式，通过使用媒介查询，可以获取到设备及设备的特性，并给出求同存异的方案，从而解决之前在单纯的布局设计中遗留的问题。
2、流动布局
原特指以百分比为度量单位的布局技术实现方式：在响应式网站设计的布局中，不再以像素（px）作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。
3、弹性图片
伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化，弹性图片可以以图片为典型，扩大研究范围：除了图片，还应该包括图标、图表、视频等信息内容的响应方式研究。
响应式设计的盛行原因
1、自身特色
严格定义的响应式一般是指响应式Web设计，而Web凭借其特有的灵活性和可塑性，可以适应各种尺寸和配置的设备，可以无处不在。
2、外部环境
快速增长且日趋加剧的互联网设备的多样化，让现今已不再有标准的屏幕尺寸。
3、内部需求
响应式设计概念一提出，各大网站及平台都希望能够采用这秉一应万的模式，可以更灵活地去适配更多设备，尤其是现在移动设备大爆棚的时代。
什么情况下适合响应式设计？
1、你希望网站可以兼容未来的新设备
新的设备层出不穷，与其被动地进行更新维护，不如主动应万变，成为响应式，当然这里只是说更适合，只要项目资源和时间允许，基本上大部分网站都可以去尝试实现响应式；而对于初次尝试响应式设计的，也可以从“简单浏览型页面”开始。
2、你并不清楚要设计开发的全新产品更适合哪个场景
与其通过预测挑选核心设备再进行分别设计，倒不如先花些心思将网站打造得更具弹性，使其在各种设备中都拥有尽可能优秀体验，因为在各方面都未知都情况下，做预测会加剧过程风险，使得结果存在巨大的挑战性。
3、你想节约成本地去适应更多场景
资源都是有限的，但总是希望能利用有限的资源去获得更大的价值，虽然比起开发设计一个普通的网站来说，要打造一个响应式站点，所需要的人力和时间资源都会有所增加，但比起为不同设备分别打造多个版本的成本还是要低很多；从维护的角度来说，也会轻松很多。
响应式设计的设计模式
1、内容优先
根据内容的可读性、易读性作为确定断点的标准，即在对内容进行布局设计的时候，可以无视设备，有内容决定何时需要采用不同的呈现方式。
未来，将是更加无法预知的设备环境，那么什么才是王道呢？——就是内容本身，变化总是来得快且狠，我们要做的就是抓住那根可以贯通全局的线！
2、基于设备
通过主流设备的类型及尺寸来确定布局断点，设计多套样式，再分别投射到响应的设备。
响应式设计的难题
虽然响应式设计的优势和趋势已被普遍认可，但目前响应式设计的模式的普及，还是有很多难题需要突破的。
1、合作流程
响应式设计远远不止是一种简单的设计策略，它为Web项目带来的是一整套全新的、完整的方法，还应该包括一种新的、可以更好地利用这一模式的工作流程。
2、跨端的交互
在响应式设计中，我们不仅要需要考虑桌面用户的使用习惯，还必须兼顾不同尺寸的手持设备，比如在桌面端无尽优雅的Hover，在移动端却是无比糟糕的体验，如何“求同存异”，让各端体验均能最佳，还是需要继续深入探究的。
3、响应式图片
目前弹性图片的做法主要是：缩放、剪裁、分条件加载等实现方法本质上都只是一个技巧，只是治标不治本地掩盖了问题，并未真正完美地实现图片的弹性。
4、性能
性能估计是在响应式开发中最大的痛，按条件加载、隐藏或显示什么内容，都会比单一条件判断的代码结构来的繁琐，并影响体验及维护。尤其是移动性能上，更多样的设备具有更加复杂的使用环境，如何识别设备，并让设备在不同环境均能良好体验，也是一根硬骨头。
