写在前面

近年来，随着科学技术的发展，终端的分辨率越来越多，响应式的设计氤氲而生。然而，作为设计师，你是否遇到过这样的情况：当你设计响应式网站的时候，由于不了解其规范及实现原理，而根据自己的理解设计出了一套设计稿。然而，当这份设计稿放到开发面前时，却发现很多你考虑得很美好的设计方案难以被开发，最终无法还原设计稿的效果。

本文围绕响应式的设计方法来写，重点简述流式网格、元素切换、响应式样式。看完本文，有助于你设计出兼容性更强，对开发友好的响应式设计。对缩短项目的开发周期，降低项目的开发、维护成本，推动项目落地有一定的帮助。

首先，我们先来了解几个概念。这几个概念有涉及到设计，也有涉及到开发。当然，我们的目的不是学习开发技术，而是通过对这些概念的了解，更好的掌握响应式设计的方法。

1. 响应式布局

响应式布局是Ethan Marcotte在2010年提出的概念。他认为，一个网站能够兼容多个终端(指不同分辨率，不同Dpi的显示设备)，而不是为每一个终端做一个特定的版本，这样的网站布局方式即称为响应式布局。

由于科技的迅速发展，终端设备的分辨率越来越多样化，响应式布局正是为此而生，其目的是确保一个页面在所有终端上都能呈现出令人满意的效果。

响应式布局结合多种布局方式，从而确保一个页面能够适应不同终端的显示。

常见的动态布局方式：

（1）自适应布局是指当视口分辨率改变时，页面的元素位置会自动调整以适应视口的布局方式。

（2）流式布局是指当视口分辨率改变时，页面元素的宽度根据百分比压缩，而高度自动调整的布局方式。

（3）弹性布局是指当视口分辨率改变时，页面元素按比例缩放从而适应视口的布局方式。

（4）响应式布局综合了多种动态布局，使得页面在不同分辨率的视口可以呈现出不同的布局。

2. 媒体查询

媒体查询这个词，对于设计师来说应该是非常陌生的。不过如果你是需要编写web静态页面的网页设计师的话，应该对此有所了解。

媒体查询是CSS3(Cascading Style Sheet：层叠样式表)新增的特性。媒体查询使得样式表可以根据不同的媒体、不同的视口尺寸定义不同的样式。这种新特性对于设计响应式页面是非常有意义的。

举个例子，我们想要设计一个这样的卡片：当它在PC端时，显示为一张漂浮着的卡片，而在移动端需要让它显示为横向铺满的通栏。

那么，媒体查询实现方式及效果如下：

如图所示，开发只需要先编写号移动端的样式，然后在样式表中加入宽度大于768px的设备的样式表，即可实现一套前端代码显示不同的样式，而无需为移动端专门编写一个html元素或者重新制作一个前端页面。

看到这里，或许有人会疑惑，如果是768px以下的宽度才会显示移动端的样式，那么有的大屏手机宽度分辨率超多768px了，那不是和一般的样式冲突了吗？

其实，这个问题作为设计师并不需要考虑，CSS3里面已经给我们解决了，前端工程师只需要在head标签中加入

<meta name="viewport" content="width=device-width, maximum-scale=1">

这一句html代码就可以了。

这句代码其实就是规定了设备屏幕的宽度按照dp(ios使用pt)来取值。

举个例子，我们设计师经常用来做移动端设计尺寸的iphone6的屏幕分辨率为750x1334。逻辑分辨率Pt=375x667，也就是说iphone6的浏览器会把屏幕当做375px的宽度来显示。

3. Bootstrap

Bootstrap是目前世界上受众最广的web前端框架，集合了世界上许多前端工程师的心血和经验，非常适用于响应式和移动设备的开发。学习Bootstrap，有助于深入了解响应式的实现原理和应用方式。

4. 网格系统(Grid System)

这里说的网格系统当然不是排版布局中用到的栅格网格，而是响应式布局中用来控制列宽和列数的流式网格系统，其特点是随着视口尺寸的变化，网格的列宽和列数会有不同变化，以适应不同尺寸的视口。

本文以Bootstrap的网格系统为例，讲解响应式布局中网格设计的规范。

一、布局容器

布局容器可以理解为主视图区域，见下图：

传统的静态布局页面一般会采用1000px、1100px 或 1200px等宽度作为容器宽度进行设计。

在响应式布局中，一般有两种容器类型：响应式固定宽度容器和全屏宽度容器。

（1）响应式的固定宽度容器：

响应式布局中，由于需要兼容不同宽度的视口，容器显然不能采用固定的尺寸作为宽度。所以，响应式布局所采用的固定宽度容器会根据视口的尺寸而进行调整，常用的规范如下：

（2）全屏宽度容器：

顾名思义，全屏宽度容器就是我们用来设计全屏网站所采用的容器尺寸，它在任何时候，容器宽度都为100%

二、网格系统

1. 从bootstrap的网格系统开始

网格系统是响应式设计的核心，通过对界面元素定义不同分辨率下的网格列数，可以实现元素的响应式。

网格常见的有12列、16列、24列，之所以采用这样的数字，是因为，这样的网格可以很好的根据需要均分出1列、2列、3列、4列……等适用于多种情况的网格。

12列可分成：1列、2列、3列、4列、6列、12列。

16列可分成：1列、2列、4列、8列、16列。

24列……

以bootstrap为例，它使用的是12列网格系统，并且支持嵌套(嵌套后面再讲)。

我们通过例子来讲使用网格设计响应式布局的方法。

假设我们要设计一个图文列表页，例如站酷首页、Dribbble首页这样的。同时，我们想要做到更好的自适应：1200px以上的视口，显示六列。992px - 1200px的视口，显示3列。

768px - 992px 的视口，显示两列。而小于768px的视口，则显示1列(类似于站酷APP)。

利用，网格系统，我们可以这样设计：

这样的响应式设计，对于掌握响应式框架、懂得网格系统的开发人员来说，只需要非常少量的代码就可以搞定。

当然，网格系统的应用场景不单单是等列宽列表，它几乎可以用在一切布局上。

比如，不对等的布局：

再比如只占据一半内容的布局：

1. 网格嵌套

首先看下面的例子：

从上面例子中应该容易理解嵌套。

网格嵌套就是指一个网格系统中可以再嵌套一个网格系统，嵌套的网格系统还可以继续嵌套。从而构建更加复杂的布局。

三、元素切换

在响应式布局中元素的切换是指，不同元素根据终端尺寸不同自动切换显示、隐藏状态的行为。

元素的切换应用场景：

1. 在大屏到小屏的变化过程中，隐藏部分信息。

2. 对于某些需要在不同终端上需要呈现截然不同的视觉效果的设计，由于无法使用一个元素达到这种变化。所以需要分别制作两个不同的元素，再根据需要进行显示隐藏。

一般而言，某个元素块隐藏之后，该元素右侧的元素会往左移填充。某行元素隐藏后，该元素以下的元素会上移填充。设计时遵循此规律会有利于技术实现。

注意：元素切换功能需要谨慎使用，减少设计需要切换的布局，特别是避免对整一个网页设计完全不同的版本。

四、响应式样式

如前文所叙，元素的样式可以在不同分辨率的视图内进行切换。这并不是说我们设计时可以任意设计。当我们在ps等设计软件设计的样式无法通过css样式写出，而必须使用图片或其他复杂的组合来实现的时候，则难以做到样式的响应式。

这里总结一些CSS常用的样式，设计师只需使用这些样式来组合设计，就可以创造出前端容易实现的响应式样式。

更形象的演示效果请见附件中的Html文件。

(PS：如果想要更深入的了解样式的响应式，还是需要自行了解一下CSS样式表的写法。)

五、如何优化

接下来，要讲的是在响应式设计中，如何合理的对多个端口进行布局的调整，以达到易于开发的目的。

1. 保持一致的顺序

响应式布局由于布局的“善变”，对于内容的设计也不会采用固定的大小和顺序。一般来说，内容是以流的形式进行设计。对于内容流来说，需要遵循从左到右→从上到下的变化。

这样设计一是符合现代人的阅读顺序且有利于阅读顺序在不同终端上的一致性；二是更利于快速开发前端页面。

对于上图中，错误示范的情况，并非决对不可行，而是一般不建议。这种反常规的顺序，对于开发来说难度增大许多，而且会产生更多冗余代码。

例如之前做过的一个网站，就是典型的例子：

2. 尽量不要使用5列

正如前面介绍网格系统时说到过，网格系统一般采用12列、16列、24列等可以均分为多个数的2倍数列。当你想设计5均分列、7均分列、9均分列、11均分列等列数时会发现，这些网格系统并不能满足所需。一旦设计这样的列数，就意味着开发人员需要自己写这个等分样式或者修改框架的网格系统，降低其效率降低。

并且，这些列数将比较难和现有的网格系统交互使用，使得响应式的设计收到影响，开发也同时受到这些影响。

3. 减少模块的增减

即便CSS3提供了媒体查询和元素的显示隐藏功能，但是我们依然还是尽量的减少通过隐藏模块的方式来向下兼容低分辨率的显示器。

因为这样做虽然可以增加用户体验，但是对于流量和代码复杂度都没有任何帮助。

特别对于受众面广的门户网站来说，可以说寸流量寸金，这样的响应式布局，即便你把移动端的页面设计得非常非常简洁，那些隐藏起来的部分也仅仅只是隐藏起来了，它依然会被下载到你的移动设备上。

现阶段来说，更好的解决方案，依然是给移动端单独设计一套页面，单独开发一套代码。这样做除了节省流量外，也能更好的针对移动端的操作习惯进行设计，而不用为了兼容更多的终端而牺牲了一些体验。

4. 样式统一

同一个模块在不同终端上尽量做到统一样式。毕竟视觉效果更统一的话，品牌感会比较强。对于设计师的你来说，视觉规范更容易写，更容易维护。

而开发人员也会感激你的，因为他不用为不同的样式去编写、去维护更多的样式表。

而代码越少，加载越快，用户体验也越好。

5. 移动优先

有没有发现，许多优秀的响应式网站，设计总是那么的简洁大方，对手机等小屏设备的支持总是那么的完美，用户体验好到飞起。

因为他们采用的是移动优先的设计原则。移动优先这个词是伴随着响应式而出现的，主要是因为移动端的布局和功能总是比更大的设备简单。

而从简单到复杂的过程总是比从复杂到简单的过程容易。

而在大屏设备上观看简洁的内容也总是比在小屏设备上观看复杂的内容来得舒服。

于是，当我们设计响应式网页的时候，应该考虑从移动端开始，先设计移动端的页面，然后再设计更大的屏幕，往其中增加更复杂的布局和内容，最终实现从移动端到超大屏幕的渐进增强。

六、什么时候选择响应式设计

响应式设计的诞生是为了解决不同分辨率的终端的适配问题，那么它是网页设计的最佳方案吗？它可以解决所有网页设计的问题吗？

答案是否定的。时至今日，响应式的研究已经日趋成熟，然而，它仍然只能适用于一部分场景。如果你的项目符合以下几点，那么响应式设计会是个不错的选择：

1. 需要更强的兼容性

响应式诞生的目的就是为了解决不同终端的兼容问题，所以如果你的项目需要兼容多种不同的设备，那么可以考虑响应式设计。

2. 节约维护成本

响应式布局虽然相较于静态布局开发难度大，但是维护成本更低。

相对于多个终端多个版本的页面来说，无论是修改代码还是运维都只需要对一个内容进行操作，而无需对每个端口单独维护。

3. 以展示为主的站点

如果你的网站是功能型的，而且非常复杂的话，不要考虑响应式，因为响应式的页面代码冗余很大，不利于复杂网站的开发。

相反如果你的网站是以内容展示为主的话，会比较适合使用响应式布局。

4. 不考虑旧的浏览器

由于响应式布局的很多实现手段是基于CSS3的，对于某些较老的浏览器，会出现兼容问题。(“IE”我说的就是你，别东张西望！)

所以，如果需要考虑一些旧浏览器的兼容问题的话，那还是乖乖的做静态布局吧。

...

附件是一份用于演示本文所提到的各种响应式的实现效果的Html，请打开目录下的index.html 体验。不要使用低版本的IE打开。