Design System & Application - Chapter 1 网格系统 Grid System

网格系统（Grid System）是本设计系统的基本规则，它是我用来 解决浏览器适配问题并使界面整体表现的规范 的非常有效的方法。另外需要指明，没有完美的方法，这就像前端中没有完美的可以解决所有问题并且都是最优解的框架一样。它仅是我们的一个思路，并围绕它去建立一套可以有效的解决规范及适配问题的 UI 设计系统，并应用到开发中。

---

Part 1

适配带来的问题

通常，我们都是基于 像素点（px）进行设计和开发的，每一个 UI 元素，都有一个相对固定的尺寸。

但是，现代的终端设备，无论是 PC 端，还是移动端，显示分辨率都是多种多样的。尤其在移动端各种不同的显示技术和分辨率下，使得 分辨率适配 成为一个让设计和开发都头疼的问题。

当 UI 元素尺寸固定时，保证其在各种分辨率下，无论大小都有一个非常良好的显示效果是一个不现实的问题。

如下图所示，一个大小固定为 100px * 40px 的 UI 元素，在四种不同的分辨率下展示效果是不稳定的。在较大的分辨率下，它将显得格外的小，而这显然不是我们所希望的看到的，因为它对于用户来说是非常不友好的。

这也同样会导致，在较大的分辨率下，单行（列）展示的内容（UI 元素）更多，而较小的分辨率下，展示的内容将较少。

我们通常通过 栅格 来解决此类问题（横向排版响应），或者通过纯粹的 响应式 设计，去改变不同分辨率下的排列及展示方式。

但这让设计们在考虑布局时花费了更多的时间和精力，也使前端开发们在页面还原时要格外的小心。

在时间充裕的时候，这些显然不是问题，但往往我们会面对时间紧任务量大的情况，所以也希望有一个更高效的方式，使设计和开发都能更快的完成各自的任务，并且减少因适配问题所带来的困扰。

面对此种情况，通常的解决方案是，针对不同的分辨率进行单独的设计。这种方案虽然照顾了多分辨率下的显示效果，但是却让设计及前端开发们操劳过度。

使用响应式 UI 框架（如 Bootstrap）也是一种方案，但是却无法解决个性化设计的全部要求（过分的模版