今天分享一个很多设计师头疼已久的问题，关于网页响应式布局原理和设计方法。文章主要包含三个部分：

响应式页面是什么 

响应式布局的规则 

响应式的设计流程

响应式页面是什么

在过去，网站通常就是为了电脑大屏幕展示而设计，如果用手机访问，只能在巴掌大的屏幕里看缩小版的页面。虽然还有手机专供的 WAP 页面，但因为太简陋也无济于事。

随着智能手机、3G、4G、HTML5 的普及，使用手机访问网站的人越来越多，为了让用户在手机上看到更合适的布局，且兼顾开发的效率，响应式的概念就被提出了。  通俗解释，就是通过一套代码，可以无缝匹配符合电脑、平板、手机预览效果的前端技术。

虽然响应式的应用越来越广泛，但是从零开始去写一个响应式效果的网站对于程序员来讲是非常复杂的，因为当中包含了大量的逻辑、判断、适配内容。

响应式适合应用在一些简单的官网、展示类页面，展示的内容大致相同。而自适应适合应用在需要在不同客户端类型有较大差异的网站，这样只使用一套前端代码就完全行不通了。

响应式布局的规则

响应式布局的规则并不是特别复杂，只要注意两个问题：分段响应规则和组件宽度适应。

1. 分段响应规则  敲黑板，响应式的响应，面向的核心对象是浏览器窗口的宽度，而不是设备类型。所以打开使用响应式的网站，我们通过改变浏览器的宽度，就可以看见不同的展示效果。

我们可以发现，浏览器宽度每达到一个数值（Breakpoint）的时候，页面的排版和样式就会发生明显的变化，而这就是响应式设计最重要的功能 —— 分段展示。

也就是说，响应式规则就是为页面分配不同的宽度区间，每个区间有各自展示的样式，用来应对不同的场景和设备类型，常见的适配区间大致如下：  包含图片截图 320-800 ：移动端收集屏幕 800-1200：平板或上网本屏幕 1200-无穷：一般的电脑显示器  面对分段式的布局、样式变更，我们就要关注到底发生了哪些变化。总结起来，可以简单的归纳成三种组件的调整：内容增减、布局调整、样式调整。  

第一种，内容增减。即部分模块在不同的分段内会有显示和隐藏的状态，尤其是一些网页端的内容觉得在小屏幕上展示会太多了，就在小屏幕场景中隐藏掉。

第二种，布局调整。主要是模块的排列和顺序发生变化，常见的就是模块一行的列数发生改变。

第三种，样式变更。即针对不同的分段设计完全不一样的样式，最多应用在导航栏的设计中，会为最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 样式。

所以，归纳起来，就是页面针对不同的分段展示不同的结果，即页面中的组件触发了对应的变化类型。每个组件都可以应用不同的变化类型，而无需进行统一。

2. 组件宽度适应，分段式响应，是响应式布局的第一层逻辑。而在触发关键值（Breakpoint） 之间的区间，我们拖动窗口的宽度，会发现组件的宽度也随之改动，这就是 —— 组件宽度适应。

组件宽度适应在手机 UI 的适配中非常重要，即完成不同屏幕宽的手机适配所应用的逻辑，所下面我们简单讲讲它的规则。组件的宽度适应模式主要有两种类型，一种是容器宽度适应，一种是容器比例缩放。容器是一个比较抽象的概念，类似设计软件中的编组，它集合了所有下级元素，但本身并没有实际的内容和样式。在响应式规则中，下级元素并不会和这个容器等比变动。

如果对软件响应式功能了解不全面的同学，就可以自己多搜索一下对应的说明，我就不在这里过多的展开了。

响应式的设计流程

响应式设计是一种源自技术的概念，而不是单纯的设计风格、方法，所以设计响应式设计其实就是 「面向编程设计」。

设计界面要吻合编程的真实方法和需求，而不是根据我们想怎么做就怎么做，所以整个流程不能只站在设计师自身的角度考虑，而要和前端程序员紧密沟通，首先确定响应几个宽度区间，以及它们对应的数值分别是多少。

然后我们就要完成对应数量页面的设计，因为前面我们说过，分段响应规则中会有明显的样式变动，这就要求设计师是一定要给出设计示例的，而不能依靠口头描述或程序员自由发挥。

只要根据上述的流程，在遇到不确定或者不清楚的情况，就和前端程序员做沟通，那么很快就可以将项目输出出来。