Hero images 给响应式设计提出了独特的挑战。在最近的响应式图片核查期间，我们发现了一个独特的解决方法，一个我想要分享的方法。直到几年前，我都不熟悉Hero image这个术语。一个就职于大公司的朋友用这个术语，我不得不问这个是什么意思。我不知道这是不是一个常见的描述因为我与世隔绝了。或者这可能是大公司的术语。

本来要管理Rhythm排版一致不是一件易事，响应式中的Rhythm排版就更加困难。幸运的是，Sass的Map可以更好的管理和实现响应式排版。有各种各样的方法来处理响应式排版和Vertical Rhythm，并不局限于我的建议。然而，这是我很多次工作中总结出来的经验之谈。

响应用户输入可以说是我们界面开发的核心。为了构建响应式Web产品，理解触摸，鼠标，指针，键盘如何和浏览器一起工作是关键。你很有可能已经在移动浏览器上经历了300毫秒的延迟或者在纠结于触摸滚动导致页面卡顿。在这篇文章中，我们将介绍事件级联并且利用这些知识来实现一个支持多种输入法的点击事件而不违反像Opera Mini这些代理浏览器事件规则。

响应式网页设计是针对多屏幕问题的一个很好的解决方案，但从印刷的视角来看有点困难。没有固定的页面尺寸，没有毫米或英寸，没有任何的物理限制，无从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去，因为越来越多的设备都可以打开网站。因此，我们需要弄清楚响应式网页设计的一些基本原则，接受流体网页，而不是与之相抗。为了让它保持简单，我们将着眼于布局（是的，响应式比它更复杂，如果你想了解更多，这是一个很好的开端。）

为了把网站Gilt.com在移动端响应，我们基于特殊行动团队确定的几种响应式模式来“响应”我们网站布局。早点确定这些模式有利于帮助我们更有信心地作出响应式相关的决定。在这第四篇响应式相关博文里，我将与你分享如何发现和实现我们确定的最热衷设计模式之一：全屏Modal!

在本系列的第二篇文章中，我的同事Greg Mazurek讲了为什么在项目使用“在选择器内使用媒体查询”。采用这种模式的好处就是在未来开发中代码可维护性更强。那么，接下来我将讨论我们如何把相同的原则应用到测试实践中来。

在第一篇文章中，分享了如何组织一个成功的回顾总结会议。那么在此文章中，主要讨论我们工作中所用到的技术以及如何组织媒体查询。通过实战来介绍在项目中使用块媒体查询好还是在选择器中插入媒体查询方便。

响应式网站听起来并不陌生，但还是有很多同学没有实战经验，可以说听其名已久，但就从未操刀。今天开始根据Gilt团队以制作响应式Gilt.com网站为例，通过一个系列来介绍Gilt团队是如何制作一个响应式网站，碰到了什么问题？又是如何解决这些问题？首先要向大家介绍的是回顾与总结。通过回顾与总结，来理清楚整个开发过程的每个环节，更为重要的是通过这样的模式在不断提高团队的整体实力。

四年前，ETHAN MARCOTTE发布了一篇文章(《Responsive Web Design》)之后的第13天，Steve Jobs发布了iPhone，突然有了流体和视网膜（Retina）图像一说;也突然有了相关争论。我们面对实现流体图片又名视网膜又名响应式图片的第一反应就是使用制作响应式布局的工具：媒体查询!浏览器无法知道它加载的网页是什么，但他可以意识到他们的渲染环境，比如说视窗大小，用户屏幕的分辨率等诸如此类的事情。

在上一篇文章中，我阐述了在响应式设计中处理图像3种方案的观点，讨论了最好的解决方案,采用合适图像尺寸服务于各种尺寸的屏幕。那么，本文接下来将从另外一个角度来聊管理图像，那就是跨浏览器的兼容性。在整个网页开发过程中，尤其你想创造一个响应式的结构——一个web开发人员必须去面对一个最重要及最频繁的问题就是兼容各种浏览器。