写在前面
去年上半年，我已经开始着手推动工程项目中积极响应式内部结构设计的破冰。以官方网站优化需求为打下基础，主动去做了积极响应式的页面内部结构设计，也劝服了产品、内部结构设计和合作开发的相关同僚一起把它上架落实，但不幸的是，由于各种各方面的其原因，比如，生搬硬套的PC组件，无综合化的内部结构设计使得移动端写作欠佳，导航系统相容性有限之类其原因，上架几个月后又悄悄推向市场。我不禁深思，工程项目中是否应该推行积极响应式？今年初再启动了拉沙泰格赖厄县积极响应式工程项目，从产品、可视化、听觉到合作开发，各个角色全各方面参与了积极响应式工程项目，最终要道的页面同时实现全面积极响应式。在工程项目过程中有控制技术结晶，也有不少的思考，也就有了以下的文字。该文的内容紧紧围绕四个各方面，积极响应式的基本概念，课堂教学方式，许多事例，和许多看法。
基本概念
Ehan Marcotte 为A List Apart写过一则介绍型的该文 <积极响应式页面内部结构设计> 。该文讲到积极响应式的基本概念源于积极响应式建筑物内部结构设计，即卧室或是内部空间会依照其内部群体数量和壳状而变动。
[最近一门新兴的学科“积极响应式建筑物(responsive architecture)”已经开始在探讨物理内部空间依照壳状于其中的人进行积极响应的方式。建筑物师们通过把PDP机器与可剪切材料结合的方式，尝试艺术装置和可卷曲、伸缩式和扩充的砖墙内部结构，达至依照接近群体的情况变动的效果。体育运动感应器与气候控制技术相结合，修正紧紧围绕现代人周围的卧室的温度和自然环境照明。已经有公司制造了“智能玻璃控制技术”，当室外人数达至很大的danger时，它可以自动变为不透明状态，为现代人提供更多更多个人隐私保护。]
Web积极响应式内部结构设计的基本概念与之也十分相似。在如今控制技术飞速发展的时代，一向是以快论英雄，电子设备和解析度飞速发展，就以分类相对明确的iPhone为例，就有多达4种的解析度和萤幕体积，更别说供应商飞速发展的Android机领域。因此，为五种电子设备或是特定电子设备解析度制定相应的独立版是十分费时的事情。
Web积极响应式内部结构设计的理念，应当是，页面可以依照用户的电子设备自然环境，包括系统，解析度，萤幕体积等等因素，进行自发性式修正，提供更多更适合当前自然环境的写作和操作体验，对已有和未来即将出现的新电子设备有很大的适应力。
课堂教学
有了基本概念，很大要聊聊同时实现的方式。近似于积极响应式建筑物，Web页面也有对应关键所在。
可卷曲、伸缩式、扩充的砖墙内部结构——可扩充的产业布局；
体育运动感应器——MediaQuery；
气候控制技术——栅格；
艺术装置——css之类。
以上给了我写该文的脉络内部结构灵感，于是先从最基础的产业布局谈起。
可扩充的产业布局
有一种流体产业布局的基本概念在早起web兴起的时，就已经开始盛行了。它的基本概念是说页面会依照浏览器窗口的变动进行更改，网站可以通过维护一套代码，保质一致性的内部结构设计。我这里强调的可扩充的产业布局也是基于这个基本概念，只是现在的方式多种多样，因此要强调页面产业布局的可扩充性。
可扩充的产业布局途径有很多，比如常见的百分比产业布局，和一直未成为标准的栅格产业布局之类。
框架
就从这框架来说，以一个常见的可扩充的三栏产业布局为例，就有数十种方式，这里抛砖引玉举几个例子。
方式1：
demo1: http://t.cn/Rt2i2f6
方式2：
demo2: http://t.cn/Rt2iUAi
方式3：
demo3: http://t.cn/Rt2ibVl
方式4：
demo4: http://t.cn/Rt2iG0w
方式5：
demo5: http://t.cn/Rt2i5fE
方式6：
demo6: http://t.cn/Rt2ic5Z
方式7：
demo7: http://t.cn/Rt2iVFX
方式8：
demo8: http://t.cn/Rt2iM2Q
方式9：
demo9: http://t.cn/Rt2iJUw
除了上述总结的几种，还有更多更多的方式。两栏产业布局同理就不赘述。
此外W3C也有一个栅格化产业布局（Grid Layout）的规范，这个产业布局是基于两维栅格系统内部结构设计的，可以轻松按照我们的意愿改变页面的内部结构设计。它与Flexbox配合效果更佳。但目前仍处于草案阶段（
https://www.w3.org/TR/css-grid-1/
）。翻看了W3C的最新草案内容，对Grid Layout的使用方式和原理简单介绍下。
1）定义grid：
首先在grid item外的父级容器上定义display: grid.
Values：
grid – 定义block-level的栅格；
inline – 定义 inline-level的栅格
2）许多相关基本概念：
grid lines – 是横向和纵向划分grid的线，它可以一朝数字顺序被指定，也可以用用户制定的名字被指定。
grid tracks – 指的是一个grid列或是行之前的区域，换而言之是两个相邻的grid lines之前的内部空间。下图是第二行和第三行之间的grid tracks。
grid cells – 一个grid cell指的是grid中最小的单位。
grid areas – 是用来展现一个或多个grid item的逻辑内部空间。它被四条grid line包围。
3）grid item 属性
了解了许多基本基本概念后，就可以更加绒里理解相关的grid item属性。
grid-column-start
grid-column-end
grid-row-start
grid-row-end
这四个属性中，grid-column-start和grid-row-start指明区域起始线，grid-column-end和grid-row-end指明区域结束线。这四个属性均有以下四个值可取。
Values：
<line> – 可以是一个数字，代表的是 grid line
span <number> – 该项会横跨所提供更多的数字个grid tracks
span <name> – 该项会横跨直到碰到下一个指定名字的grid line
auto – 自动或是默认属性
举个例子：
代表的区域就是：
除以上提到，grid还拥有更多的属性，使之可以定义grid item的宽高，间隙，内部自适应的方式，对齐方式之类。更多属性可以参考W3C文档：https://www.w3.org/TR/css-grid-1/。
4）浏览器支持：
令人遗憾的是，浏览器的支持度还
框架搭建好，才仅仅是积极响应式的已经开始。但是俗语有云：Well begun is half done. 积极响应式从做好的产业布局已经开始。
感谢你的写作，本文由 百度ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。
注明出处格式：百度ISUX (https://isux.tencent.com/responsive-web-design-layout.html)
