浏览数量： 2346 作者： 本站编辑 发布时间： 2015-04-02 来源： 本站
2010年5月，伊桑.马科特（Ethan Marcotte）在“A List Apart”写了一篇开创性的文章（题为“Responsive Web Design” ），他利用三种已有的工具：流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）创建了一个在不同分辨率屏幕下都能漂亮地显示的网站。 Ethan Marcotte力劝设计师们要去利用那些Web独有的特性去进行设计： “我们可以将不同联网设备上众多的体验，当作是同一网站体验的不同侧面来对待，而不要为每种设备进行单独剪裁而使得设计彼此断开，这才是我们前进的方向。虽然我们已经能够设计出最佳的视觉体验，但还要把基于标准的技术也嵌入到我们的设计中去，这样才能使得我们的设计不仅灵活，而且还能适应渲染它们的各种媒介。” Ethan Marcotte证明了一种在多种设备上都能提供卓越体验的方法的存在，而且这一方法不会忽视不同设备的差异，也不会强调设计师的控制权，而是选择了顺其自然并拥抱Web的灵活性。
这里简单介绍下上面的提到的三个概念：流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）原本都是指现有的一些技术手段，但在做响应式设计研究的过程中，这些概念还是有更广泛的意义，设计师也应该有所了解：
流动布局：在响应式设计的布局中，不再以像素（px）作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。
媒介查询：媒介查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询，可以获取到设备及设备的特性，并给出求同存异的方案，从而解决之前在单纯的布局设计中遗留的问题。
弹性图片：伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。
响应式设计的概念从提出至今，一直不断蔓延扩散，并得到各方认可的主要原因：
1、外部环境：快速增长且日趋加剧的可联网设备的多样化，让现今已不再有标准的屏幕尺寸；
2、自身特色：严格定义的响应式一般是指响应式Web设计，而Web凭借其特有的灵活性和可塑性，可以适应各种尺寸和配置的设备，可以无处不在。
3、内部需求：响应式设计概念一提出，各大网站及平台都希望能够采用这秉一应万的模式，可以更灵活地去适配更多设备，尤其是现在移动设备大爆棚的时代。
当然也并不是所有的情况都理所应带应该采用响应式设计，那么什么情况下更适合采用响应式呢？
1、你想节约成本地去适应更多场景
虽然比起开发设计一个普通的网站来说，要打造一个响应式站点，所需要的人力和时间资源都会有所增加，但比起为不同设备分别打造多个版本的成本还是要低很多；后期网站维护管理也会很方便。
2、你并不清楚要设计开发的全新产品更适合哪个场景
与其通过预测挑选核心设备再进行分别设计，倒不如先花些心思将网站打造得更具弹性，使其在各种设备中都拥有尽可能优秀体验。因为在各方面都未知都情况下，做预测会加剧过程风险，使得结果存在巨大的挑战性。
3、你希望网站可以兼容未来的新设备
新的设备层出不穷，与其被动地进行更新维护，不如主动应万变，成为响应式。 当然这里只是说更适合，其实个人认为只要项目资源和时间允许，基本上大部分网站都可以去尝试实现响应式；而对于初次尝试响应式设计的，也可以从“简单浏览型页面”开始。
4、配合新媒体营销
有超强的整合能力，它可以与微信打通，变成微商城、微网站等，人们可以使用微博、QQ等工具同步网站内容至社交平台，实现品牌的传播与分享。
想要了解更多搜索引擎优化、外贸营销型网站建设相关知识，请添加领动小姐姐微信，我们一起交流~
