CSS 响应式布局系统的实例代码

响应式布局系统，在现在流行的 CSS 框架中已经非常常见了。它主要由容器类和约定一行列数的栅格系统组成，组成了一个框架的骨架。

在流行的前端框架 Bootstrap 和 Bulma CSS 中，就有体现。像 Bootstrap 的 .container 、 .row 、 .col ；还有 Bulma CSS 的 .container 、 columns 、 column 都是表示这类布局系统。虽然名称不一样，但原理都是相同的。

随着 Flex 布局的普及，几乎现代的栅格系统的实现都选择使用这一灵活的布局方式。

现在就来看一下，怎样实现一个最小的 CSS 响应式布局系统吧。

首先从容器说起。

为了保证实现代码的简洁，本文将使用 SCSS 来写。如果你对 SCSS 还不熟悉，没有关系，行文中会对使用到的知识点做介绍。

容器

容器主要用来包裹网页的主要内容，常见效果就是将内容居中地显示在屏幕中间。

我们使用 .container 来约定容器。

首先，容器是水平居中的，这一块样式较为容易：

.container {
margin-left: auto;
margin-right: auto;
}

所谓的响应式容器，就是根据不同的断点（breakpoints），也就是当前的视口宽度，来决定容器使用的 max-width 值。

这里我们借鉴了 Bootstrap 中对断点的定义，根据视口宽度，分为以下几类设备：
 

[0, 576px)
[576px, 768px)
[768px, 992px)
[992px, 1200px)
[1200px, +∞)

针对断点定义，声明一个变量 $breakpoints ：

$breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);

$breakpoints 称为“列表”，是 SCSS 提供给我们的数据结构。由一个个 key: value 键值对组成。上例中的 key 表示的是设备有效范围的起始点。

不同的设备下，容器有不同的 max-width 值。所以，这里我们再声明一个表示容器宽度的变量 $container-max-widths ：
 

$container-max-widths: (
xs: none,
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);

这里的 $container-max-widths 也是个列表，这里的 key 表示某个设备下容器的最大宽度。比如，在超大屏设备下，容器的最大宽度是 1140px ，而在平常手机下，不设置容器的最大宽度，为默认值 none 。

有了实现的思路，接下来就着手实现。

我们就可以借助媒体查询指令 @media ，依据视口宽度的范围，给予 .container 不同的 max-width 值。