那时撷取两个很多结构雕塑家郁闷多时的难题，关于页面积极响应式产业布局基本原理和结构设计方式。该文主要包涵四个部分：
积极响应式页面是什么积极响应式产业布局的准则积极响应式的结构设计业务流程因此专业术语太少说，他们直接进入自问自答吧！
在过去，中文网站一般来说是为了笔记本电脑电视萤幕展现而结构设计，如果用智能机出访，根本无法在拳头大的萤幕里看增大版的页面。尽管除了智能机只供的 WAP 页面，但即使太破旧也徒劳无功。
随着智能智能机、3G、4G、HTML5 的普及化，采用智能机出访中文网站的人愈来愈多，为的是让使用者在智能机上看到更最合适的产业布局，且兼具合作开发的工作效率，积极响应式的基本概念就被提出了。
浅显说明，是通过两套标识符，可以点对点相匹配合乎笔记本电脑、智能机、智能机自动更新效用的后端控制技术。比如说上方 Nike 官方网站，是应用了积极响应式结构设计后在相同应用程序、解析度下的效用。
尽管积极响应式的应用领域愈来愈广为，但是从头开始去写两个积极响应式效用的中文网站对开发人员来说是比较复杂的，即使之中包涵了大量的方法论、推论、网络连接内容。
因此，那时市售看见的积极响应式中文网站，绝大多数采用了一些开放源码的标识符或是架构。而应用领域最广为的，就数 Bootstrap 了。
之因此提这个，是即使难道合作开发采用了自己写的架构，那么对他们的结构设计稿也就上了枷锁，他们需要根据架构的要求来结构设计介面，这会接著具体内容说明。
除了个难题，是为的是实现智能机、智能机和笔记本电脑相同的自动更新效用，并不是只有积极响应式产业布局一类控制技术，除了另一类控制技术 —— 自适应。
浅显点说，自适应是为相同应用程序分别提供两套独立的后端标识符，和积极响应式采用两套标识符网络连接多种应用程序相同。
积极响应式适合应用领域在一些简单的官方网站、展现类页面，展现的内容大致相同。而自适应适合应用领域在需要在相同应用程序类型有较大差异的中文网站，这样只采用两套后端标识符就完全行不通了。
比如说爱奇艺的官方网站，为的是合乎使用者体验，在移动端页面产业布局中精简替换了大量的内容，和笔记本电脑版已经没有太直接的联系了。
两种做法并没有好坏之分，只有适不适合项目之别。了解了它们的相同，他们就可以进一步学习积极响应式的准则了。
积极响应式产业布局的准则并不是特别复杂，只要注意两个难题：
分段积极响应准则组件宽度适应分段积极响应准则
敲黑板，积极响应式的积极响应，面向的核心对象是浏览器窗口的宽度，而不是设备类型。因此打开采用积极响应式的中文网站，他们通过改变浏览器的宽度，就可以看见相同的展现效用，比如说下图的星巴克官方网站。
他们可以发现，浏览器宽度每达到两个数值（Breakpoint）的时候，页面的排版和样式就会发生明显的变化，而这是积极响应式结构设计最重要的功能 —— 分段展现。
也是说，积极响应式准则是为页面分配相同的宽度区间，每个区间有各自展现的样式，用来应对相同的场景和设备类型，常见的网络连接区间大致如下：
包涵图片截图 320-800 ：移动端收集萤幕 800-1200：智能机或上网本萤幕 1200-无穷：一般的笔记本电脑显示器
面对分段式的产业布局、样式变更，他们就要关注到底发生了哪些变化。总结起来，可以简单的归纳成三种组件的调整：内容增减、产业布局调整、样式调整。
第一类，内容增减。即部分模块在相同的分段内会有显示和隐藏的状态，尤其是一些页面端的内容觉得在小萤幕上展现会太多了，就在小萤幕场景中隐藏掉。
第二种，产业布局调整。主要是模块的排列和顺序发生变化，常见的是模块一行的列数发生改变。
第三种，样式变更。即针对相同的分段结构设计完全不一样的样式，最多应用领域在导航栏的结构设计中，会为最小的分段采用 iOS 的 Tabbar 或安卓的 Menu 样式。
因此，归纳起来，是页面针对相同的分段展现相同的结果，即页面中的组件触发了对应的变化类型。每个组件都可以应用领域相同的变化类型，而无需进行统一。
组件宽度适应
分段式积极响应，是积极响应式产业布局的第一层方法论。而在触发关键值（Breakpoint） 之间的区间，他们拖动窗口的宽度，会发现组件的宽度也随之改动，这是 —— 组件宽度适应。
组件宽度适应在智能机 UI 的网络连接中非常重要，即完成相同萤幕宽的智能机网络连接所应用领域的方法论，所下面他们简单讲讲它的准则。
组件的宽度适应模式主要有两种类型，一类是容器宽度适应，一类是容器比例缩放，比如说下面的图例。
容器是两个比较抽象的基本概念，类似结构设计软件中的编组，它集合了所有下级元素，但本身并没有实际的内容和样式。在积极响应式准则中，下级元素并不会和这个容器等比变动，出现下面这种错误的效用。
正确做法是会定义下级元素针对父容器的积极响应方式，做到容器变更的同时其自身的显示也是合理的。比如说相对容器左右间距一致、对齐方向一致、尺寸固定等设置。
而这种准则的设置，是 Sketch/Figma/XD 中的积极响应式设置功能。只要设置得当，就可以获得一样的宽度适应效用。
如果对软件积极响应式功能了解不全面的同学，就可以自己多搜索一下对应的说明，我就不在这里过多的展开了。
再总结一下，积极响应式的准则是页面组件先遵循当前分段展现的产业布局效用，并在这个区间内支持小范围宽度的变更和适应。
积极响应式结构设计是一类源自控制技术的基本概念，而不是单纯的结构设计风格、方式，因此结构设计积极响应式结构设计其实是 “面向编程结构设计”。
结构设计介面要吻合编程的真实方式和需求，而不是根据他们想怎么做就怎么做，因此整个业务流程不能只站在结构雕塑家自身的角度考虑，而要和后端开发人员紧密沟通，首先确定积极响应几个宽度区间，以及它们对应的数值分别是多少。
然后他们就要完成对应数量页面的结构设计，即使前面他们说过，分段积极响应准则中会有明显的样式变动，这就要求结构雕塑家是一定要给出结构设计示例的，而不能依靠口头描述或开发人员自由发挥。
完成这些结构设计稿以后，他们再进一步确定同两个区间内，组件的宽度适应准则是什么样的。绝大多数情况下，这个阶段采用口述就可以，如果准则比较多，那么就可以在标注阶段把你要实现的效用记录上去即可。
全部结构设计稿和准则都沟通完毕以后，才进入切图导出的阶段。要提醒一次，在一些特殊的情况下，积极响应式的背景切图会和普通页面的背景切法不一样，尽可能让后端开发人员检查一遍导出的文件。
只要根据上述的业务流程，在遇到不确定或是不清楚的情况，就和后端开发人员做沟通，那么很快就可以将项目输出出来。
积极响应式这个基本概念尽管高大上，但并不是任何项目都要无脑往上套的。即使架构准则上的限制，导致他们很难在积极响应式页面中采用一些特别复杂、高级的视觉样式，导致最终呈现的效用往往非常简单或是过度依赖图片的质量。
因此，如果在功能较为复杂或需要复杂视觉支撑的页面中，就可以选择应用领域固定页面内容宽度的结构设计来完成。
最后，和页面结构设计一样，APP UI 领域一样也有很多
他们下篇再贱~
