響應式布局系統，在現在流行的 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 值。